This is my HTML:
<dd class="course_progress_steps" title="4 out of 7 steps completed">
<div class="course_progress_percentage" style="width: 57%;"></div>
</dd>
How do I get:
and print them out in a div, for example:
<div class="css-info steps">4 out of 7 steps completed</div>
<div class="css-info percentage">57%</div>
The Document Object Model (DOM for short) allows Javascript to access and manipulate rendered HTML's attributes. Quirksmode has a very helpful introduction that goes over how to achieve things like this.
Let's deal with your example
// document.querySelector allows us to get references to DOM elements using CSS selectors
// The '$' at the beginning of the variable names is a little convention to remind us it's a reference to a DOM element
var $course_progress_steps = document.querySelector( '.course_progress_steps' );
var $course_progress_percentage = document.querySelector( '.course_progress_percentage' );
// getAttribute can get an attribute value from a DOM element
var steps = $course_progress_steps.getAttribute( 'title' );
// style returns a CSSStyleDeclaration, which is a way of interfacing with element style
var percentage = $course_progress_percentage.style.getPropertyValue( 'width' );
appendCssInfo( 'steps', steps );
appendCssInfo( 'percentage', percentage );
// A helpful function for creating elements with a class of 'key' and text of 'value'
function appendCssInfo( key, value ){
// Create an element
var $css_info = document.createElement( 'div' );
// Add the classes we want
$css_info.classList.add( 'css_info' );
$css_info.classList.add( key );
// Insert the text using appendChild & createTextNode
$css_info.appendChild( document.createTextNode( value ) );
// Append the new element to the document body
document.body.appendChild( $css_info );
}<dd class="course_progress_steps" title="4 out of 7 steps completed">
<div class="course_progress_percentage" style="width: 57%;">
</div>
</dd>
So this kinda escalated. Hope it's clear how it works.
$('<div/>', { // create a div element
text: $('dd')[0].title, // change the inner text
class: "css-info steps" // add a the class to the element
}).add($('<div/>', { // create another element and add it together with the previous one
text: $.trim($('.course_progress_percentage').attr('style') // get the text inside style, $.trim() removes white spaces from the beginning and end of the string
.split(':')[1] // creates an array and uses : as the splitting point ["width", "57%;"] and selects the 2nd array value
.replace(';', '')), // remove the ;
class: "css-info percentage"
})).appendTo('body'); // since both elements are now added together we can append them both to ex. body<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<dd class="course_progress_steps" title="4 out of 7 steps completed">
<div class="course_progress_percentage" style="width: 57%;">
</div>
</dd>Stuff you might want to know/learn
Also a quick read of the jQuery Tag will really show you some of the basics
1) document.querySelector(".course_progress_steps").title
2) document.querySelector(".course_progress_percentage").style.width
works like a charm.
This should do the trick :
$(".css-info steps").text($(".course_progress_steps").attr("title"));
$(".css-info percentage").text($(".course_progress_steps").css("width") + "%");
Edit :
the selector was bad in the first answer. this is working.
$(".css-info.steps").text($(".course_progress_steps").attr("title"));
$(".css-info.percentage").text($(".course_progress_percentage").attr("style").trim().split("width:")[1].split(";")[0]);
You need to find these items and, accordingly, to obtain the required attributes and insert them as the contents, here is a small demo
Try this way calculating the width in %:
var width = Math.round($(".course_progress_percentage").width() / $(".course_progress_percentage").parent().width() * 100);
$(".css-info.percentage").append(width + "%");
$(".css-info.steps").append($(".course_progress_steps").attr("title"));
});
$(function(){
$('#button').click(function(){
var width = Math.round($(".course_progress_percentage").width() / $(".course_progress_percentage").parent().width() * 100);
$(".css-info.percentage").append(width + "%");
$(".css-info.steps").append($(".course_progress_steps").attr("title"));
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="course_progress_steps" title="4 out of 7 steps completed">
<div class="course_progress_percentage" style="width: 57%;"></div>
</div>
<input type="button" id="button" value="OK"/>
<div class="css-info steps"></div>
<div class="css-info percentage"></div>