jQuery addClass example

Change class name on click in jQuery

by Dhanck

HTML

<div id="container-one">
    <p>Cool intro
        <webview src="http://i.stack.imgur.com/Ed1aw.jpg"></webview>
    </p>
    <p>Long text</p>
    <p>New Paragraph with text in it.</p>
    <p>New Paragraph with some other text in it.</p>
    <div>
        <p>text within div</p> 
        <a href="#">sample link node</a>
    </div>
</div>
<div id="result"></div>

CSS

#result{
  border: 1px solid #ccc;
}

JavaScript

function myFunction() {
  var c = document.getElementById('container-one').childNodes;
  var txt = "";
  var i;
  for (i = 0; i < c.length; i++) {
    txt = txt + c[i].nodeType + "<br>";
    txt  = txt + c[i].nodeName + "<br>";
    txt  = txt + c[i].nodeValue + "<br>";
    //txt  = txt + c[i].getElementsByTagName() + "<br>";
    
    //txt  = txt + c[i].textContent + "<br>";
    //txt  = txt + c[i].outerHTML  + "<br>";
    //txt  = txt + "<pre>" + c[i].innerHTML + "</pre>" + "<br>";
  }
document.getElementById("result").innerHTML = txt;
}
myFunction(); 


//$("#container-one").children();
/* var div = document.getElementById('container-one');
var children = div.childNodes;
var elements = [];
for (var i=0; i<div.childNodes.length; i++) {
  var child = div.childNodes[i];
  if (child.nodeType == 1) {
    var res = elements.push(child)    
    document.getElementById("result").appendChild(child);
    console.log(res);
    
     return res.outerHTML || new XMLSerializer().serializeToString(res);
    
  }
} */