Inserting String as Elements to the DOM for javascript?

Question

I have a test chunk of HTML, as an example::

The HTML is a string, and not a DOM element, but I'm trying to see if there i a way, or an approach that can be used to insert the string as the DOM, so it can be appended to the DOM.

var test='<tr class="rowHeaders">';
test=test+'<td id="sTD" name="sTD" width="4%">test.php</td>'
test=test+'<td width="2%"><input type="radio" name="tb" ></td>';
test=test+'<td id="tTD" name="tTD" width="2%">php</td>';
test=test+'<td width="2%"><input type="button" name="vv" ></td>';
test=test+'</tr>';


var scriptTBL=document.getElementById("scriptsT");

scriptTBL.children[0].appendChild(test);

Trying to do something like this...

But "test" isn't a valid node, or element, so how can i add it to the element??

I thought about using the innerHtml, but there might already be an existing child for the table/tbody for the DOM.

I've been exploring fragments, but this isn't clicking!

The test html has the tbl:

<table id="scriptsT" name="scriptsT" >
  <tr>
    .
    .

Pointers or thoughts would be greatly appreciated.

Thank you.

Felix Kling · Accepted Answer · 2011-04-12 21:43:19Z

7

You could append to the innerHTML:

scriptTBL.tBodies[0].innerHTML += test;

foo += bar is shorthand for foo = foo + bar. You can also simplify your HTML creation code this way. Use test += 'html here';.

appendChild only accepts a DOM element.

edited Apr 12, 2011 at 21:43

answered Apr 12, 2011 at 21:13

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Zach Over a year ago

To avoid unnecessary DOM interaction (and strangeness over unclosed tags), you should append to a string variable, and then set innerHTML with the full string when you're done.

Felix Kling Over a year ago

@Zach: Yes, the test in scriptTBL.tBodies[0].innerHtml += test is meant to be the final test variable... but you are right in pointing it out.

Zach Over a year ago

I see -- that makes sense. Also, I think it should be .innerHTML, not .innerHtml.

Jim Blackler · Accepted Answer · 2011-04-12 21:12:37Z

2

Make a div (or span or whatever) and load your fragment with innerHTML.

var someDiv = document.createElement("div");
someDiv.innerHTML = "<tr ....  ";
someParentElement.appendChild(someDiv);

answered Apr 12, 2011 at 21:12

Jim Blackler

23.3k12 gold badges90 silver badges101 bronze badges

Comments

Karl Nicoll · Accepted Answer · 2011-04-12 21:31:30Z

0

You could do something like this:

var test = '<tr class="rowHeaders">';
test = test + '<td id="sTD" name="sTD" width="4%">test.php</td>'
test = test + '<td width="2%"><input type="radio" name="tb" ></td>';
test = test + '<td id="tTD" name="tTD" width="2%">php</td>';
test = test + '<td width="2%"><input type="button" name="vv" ></td>';
test = test + '</tr>';

var discardableElement = document.createElement("div");
discardableElement.innerHtml = test;

var scriptTBL = document.getElementById("scriptsT");
scriptTBL.tBodies[0].appendChild(discardableElement.firstChild);

It's a little wasteful, since you're creating a DOM element (which is an expensive operation) only to discard it, but it will create the DOM elements to allow you to use the appendChild method.

Alternatively, you could use string concatenation to use the innerHtml property, like this:

var test = '<tr class="rowHeaders">';
test = test + '<td id="sTD" name="sTD" width="4%">test.php</td>'
test = test + '<td width="2%"><input type="radio" name="tb" ></td>';
test = test + '<td id="tTD" name="tTD" width="2%">php</td>';
test = test + '<td width="2%"><input type="button" name="vv" ></td>';
test = test + '</tr>';


var scriptTBL = document.getElementById("scriptsT");

// Insert at the BOTTOM of the table
var newHtml = scriptTBL.innerHtml + test;

// OR... Insert at the top of the table
//var newHtml =  test + scriptTBL.innerHtml;

scriptTBL.tBodies[0].innerHtml = newHtml;

EDIT: Updated based on @Zach's comment.

edited Apr 12, 2011 at 21:31

answered Apr 12, 2011 at 21:17

Karl Nicoll

16.5k3 gold badges53 silver badges65 bronze badges

2 Comments

Felix Kling Over a year ago

I think @Zach meant something different. scriptTBL.innerHtml += newHtml is scriptTBL.innerHtml = scriptTBL.innerHtml + newHtml;

Karl Nicoll Over a year ago

@Felix - Yeah that's what I figured too after I made the edits (I feel stupid in hindsight), but it looks prettier this way.

Collectives™ on Stack Overflow

Inserting String as Elements to the DOM for javascript?

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related