CODEWITHSUNDEEP
javascriptdom
bobby 1
bobby 1

Reputation: 95

Inserting String as Elements to the DOM for javascript?

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.

Upvotes: 2

Views: 4751

Answers (3)

Felix Kling
Felix Kling

Reputation: 817128

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.

Upvotes: 7

Karl Nicoll
Karl Nicoll

Reputation: 16439

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.

Upvotes: 0

Jim Blackler
Jim Blackler

Reputation: 23179

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

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

Upvotes: 2

Related Questions