change html (add input) for each childNode using js

Question

Im trying to change every childNode in certain div to input using js like this:

<div class="change">
    sample text
    <h3>another one</h3>
    text
    <p>text</p>
</div>

->

<div class="change">
   <input type=text value='sample text'/> 
   <h3><input type=text value='another one'/></h3>
   <input type=text value='text'/>
   <p><input type=text value='text'/></p>
</div>

The sad thing is, that:

document.getElementsByClassName("change")[x].children[y]

returns only the h3 and p. It can't return plaintext inside a div.
document.getElementsByClassName("change")[x].childNodes[o]

is return-only. Still, if i would like to load everything into some var render and then do something like .innerHTML = render, it returns for every node something like [object HTMLHeadingElement]...

So I think that to do what I want to do, Im gonna need HTML for each Node, but I have no idea how to do this.

Check this http://stackoverflow.com/questions/6520192/get-text-node-of-an-element It might help — Roman Granovsky, Nov 28 '15 at 20:13
@RomanGranovsky I know, that using child.nodeValue I can get the text, but what about the html for nodeType=1? — user3357655, Nov 28 '15 at 20:18
`function findTextNodes(el) { var textNodes = []; for (var i = 0; i < el.childNodes.length; i++) { switch (el.childNodes[i].nodeType) { case 3: textNodes.push(el[i]); break; case 1: textNodes=textNodes.concat(findTextNodes(el.childNodes[i]); break; } } return textNodes; }` — Roman Granovsky, Nov 28 '15 at 20:35
Sorry for bad formatting. It's pain to format code in comment with mobile app. :( — Roman Granovsky, Nov 28 '15 at 20:44

score 0 · Answer 1 · answered Nov 28 '15 at 19:40

0

You can just get the actual innerHTML value, and split on the new line to get each value:

var html = document.getElementsByClassName("change")[0].innerHTML;
var lines = html.split('\n');
var replace = '';

for(var i=0; i < lines.length; i++){
  var str = lines[i].trim();
  if(str == '') continue;
  replace += '<input type=text value="' +str+ '" />';
}

document.getElementsByClassName("change")[0].innerHTML = replace;

Also, I added trim in there to remove any extraneous lines from empty items.

answered Nov 28 '15 at 19:40

koosa

2,966
3
31
46

Thanks! But - what if the element would take more than one line? like paragraph. also - and that is my bad (I had it wrong in my example), that I would like to have the tags like
outside the input.
– user3357655 Nov 28 '15 at 19:55

Furqan Aziz · Accepted Answer · 2015-11-28T20:18:57.790

0

Use ID instead of class, I have updated your code below

<div id="change">
    sample text
    <h3>another one</h3>
    text
    <p>text</p>
</div>

->

<div class="change">
   <input type=text value='sample text'/> 
   <input type=text value='<h3>another one</h3>'/>
   <input type=text value='text'/>
   <input type=text value='<p>text</p>'/>
</div>

-> 

<script type="text/javascript">
    var el = document.getElementById("change");
    var child = el.firstChild;

    while (child) {
      if(child.nodeType == 3)
          console.log(child.nodeType  + child.nodeValue); // Here you can pick every Text element to do anything
      else
            console.log(child.nodeType  + child.innerHTML); // Here you can pick every child and do anything

        child = child.nextSibling;
    }
</script>

edited Nov 28 '15 at 20:18

answered Nov 28 '15 at 19:54

Furqan Aziz

1,094
9
18

But how can i retrieve child's html? child returns only `[object HTMLParagraphElement]` or similar – user3357655 Nov 28 '15 at 20:07
Okay, I have edited code above to handle both kind of children nodes separately. See if that solve your problem. – Furqan Aziz Nov 28 '15 at 20:19

change html (add input) for each childNode using js

2 Answers2

outside the input.