We Keep Coding

JQuery Multiple Append Only Appends Last one [duplicate]

This question already has answers here:
Why do multiple `.appendTo` calls on a newly created jQuery element only append it once?
(2 answers)
Closed 3 months ago.
I want to use jQuery to create a table. Currently I have an empty table body and I would like to use some jQuery to fill up the table:
var $tr = $("<tr>"),
$td = $("<td>");
var date = '2018-01-01'
$td.text(date);
$tr.append($td);
$td.text("New Years");
$tr.append($td);
$("#body").append($tr);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody id='body'>
</tbody>
<table>
But this only appends the second td. The first one gets overwritten. Any ideas on how to fix?

Like Taplar said in comments, if the element already is in DOM, the .append will only "move it".
Now in your example, you append it a the same place, but also change the text.
Try the .clone() method to duplicate elements.
var $tr = $("<tr>");
var $td = $("<td>");
var date = '2018-01-01';
$td.text(date);
$tr.append($td);
var secondCell = $td.clone().text("New Years");
$tr.append(secondCell);
$("#body").append($tr);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody id='body'>
</tbody>
</table>

var $tr1 = $("<tr>"),
$tr2 = $("<tr>"),
$tr3 = $("<tr>"),
$td = $("<td>");
var date = '2018-01-01';
$td.text(date);
//various ways to accomplish it
$tr1.append($td.prop('outerHTML'));
$tr2.append($td.clone());
$tr3.append($('<td>', { text: date }));
$td.text("New Years");
$tr1.append($td.prop('outerHTML'));
$tr2.append($td.clone());
$tr3.append($('<td>', { text: 'New Years' }));
$("#body").append([$tr1, $tr2, $tr3]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody id='body'>
</tbody>
<table>

You have to clone $td, so that DOM treats it as a new element.
var $tr = $("<tr>"),
$td = $("<td>");
var date = '2018-01-01'
$td.text(date);
$tr.append($td.clone());
$td.text("New Years");
$tr.append($td.clone());
$("#body").append($tr);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody id='body'>
</tbody>
<table>

You can try next code without jquery:
let tbody = document.querySelector('#body');
let tr = document.createElement('tr');
let td = document.createElement('tr');
td.textContent = '2018-01-01';;
let tdClone = td.cloneNode();
tdClone.textContent = "New Years";
tr.append(td,tdClone);
tbody.append(tr);
I think that is true way, because you can create new td instead of clone created td (maybe for example this td has special classes or atributes), and you code repaint DOM only after insert tr in table.

Hmm... Maybe this could be an alternative to do that:
var texts = ["2018-01-01", "New Years"];
$.each(texts, function(i, val){
$("<tr><td>"+val+"</td></tr>").appendTo("#body")
});
$.each gets each item on the array texts, wrap it on tr and td, then append to the result on #body.
working fiddle

Adding a table tag via JavaScript with a dashed parameter

I am trying to add a Bootstrap Table table tag with Javascript. One of the parameters for the table tag is data-pagination. This method of adding it, is failing due to the -.
How can I work around this?
Desired Output:
<table id="mytable" data-pagination="true" class="table table-striped"></table>
My code:
var table_div = document.createElement('table');
table_div.id = 'mytable';
table_div.className = "table table-striped";
table_div.data-pagination = "true";
document.body.appendChild(table_div);

You could use the dataset in this case like :
table_div.dataset.pagination = true;
Hope this helps.
var table_div = document.createElement('table');
table_div.id = 'mytable';
table_div.className = "table table-striped";
table_div.dataset.pagination = "true";
document.body.appendChild(table_div);
console.log(document.body.innerHTML)

table_div.setAttribute('data-pagination', 'true')

Setting .innerHTML on a newly created TD element blank when content is returned from a function

In short, why does the following function work where the latter function does not?
Working Code
function createRawRowElementViaInnnerHTML(){
var row = document.createElement("tr");
row.innerHTML = '<td>'+createDropDownHTML()+'</td>'+
'<td>'+createTxtAreaDownHTML()+'</td>';
return row;
}
Non-Working Code
function createRowElement(){
var row = document.createElement("tr");
var td1 = document.createElement("td");
td1.innerHTML="Col 1 innerHTML -- should be overwritten";
td1.innerHMTL=createDropDownHTML();
var td2 = document.createElement("td");
td2.innerHTML="Col 2 innerHTML -- should be overwritten";
td2.innerHMTL=createTxtAreaDownHTML();
row.appendChild(td1);
row.appendChild(td2);
return row;
}
I'd expect that creating the <td> elements and setting their .innerHTML would work the same as hard coding the table cell's inner html like such '<td>'+createDropDownHTML()+'</td>'. The "non-working code" produces the <tr> element with two <td> elements, but those <td> elements content are blank (for demo purposes I set their innerHTML to show they were created correctly). Behavior is observed on both FF32 and Chrome37.
Please see this fiddle for the remaining code (such as the function calls). Also, I attempted to use the new stack overflow code-snippet, this is the same code that can be found on the fiddle.
for(var i =0; i<5;i++){
var r = createRowElement();
document.getElementById("myTable").appendChild(r);
var r2 = createRawRowElementViaInnnerHTML();
document.getElementById("myTable").appendChild(r2);
}
function createRawRowElementViaInnnerHTML(){
var row = document.createElement("tr");
row.innerHTML = '<td>'+createDropDownHTML()+'</td>'+
'<td>'+createTxtAreaDownHTML()+'</td>';
return row;
}
function createRowElement(){
var row = document.createElement("tr");
var td1 = document.createElement("td");
td1.innerHTML="Col 1 innerHTML -- should be overwritten";
td1.innerHMTL=createDropDownHTML();
var td2 = document.createElement("td");
td2.innerHTML="Col 2 innerHTML -- should be overwritten";
td2.innerHMTL=createTxtAreaDownHTML();
row.appendChild(td1);
row.appendChild(td2);
return row;
}
function createDropDownHTML(){
return '<select><option>1</option><option>2</option><option>3</option></select>';
}
function createTxtAreaDownHTML(){
return '<textarea></textarea>';
}
<table id="myTable"></table>
Any Ideas? Most posts that came up from googling had to do with the dom not being ready, which isn't the case here. Also read a post about some form of potential html validation/clean-up, but I do not understand why it'd work one way and not the other since in both functions I am using .innerHTML on some level. Looking for an answer with documentation/resources as to why the latter function doesn't work. Thank you for your time.

function createRowElement(){
var row = document.createElement("tr");
var td1 = document.createElement("td");
td1.innerHTML="Col 1 innerHTML -- should be overwritten";
td1.innerHMTL=createDropDownHTML(); // should be HTML instead of HMTL
var td2 = document.createElement("td");
td2.innerHTML="Col 2 innerHTML -- should be overwritten";
td2.innerHMTL=createTxtAreaDownHTML(); // should be HTML instead of HMTL
row.appendChild(td1);
row.appendChild(td2);
return row;
}
As seen in the above comments, you should change those lines to:
// ...
td1.innerHTML = createDropDownHTML();
// ...
td2.innerHTML = createTxtAreaDownHTML();
In these cases usually its a problem of spellings and cases. All you need to do is have a sharp eye. The M and the T in the HTML are switched in your code.

How to get a value in <td> tag

<td id="hello"> OPD </td>
On my html page, this is how I am getting a td tag in a tr.
I want to get the value "OPD" in java script variable.
var td1 = document.getElementById("hello");
Can I get this value by performing any operation on td1.
Is there any other way to do this. Please help

td1.innerHTML
should work. InnerHtml

var td1 = (document.getElementById("hello")).innerHTML;
or
var td1 = ((document.getElementById("hello")).innerHTML).trim();

There are several ways to do this:
Either you use a DOM-Shim and just the following:
var td1 = document.getElementById('hello').textContent
Or you don't want to use a shim, then you have to use the following (thank IE):
var hello = document.getElementById('hello'),
td1
if ('textContent' in hello) {
td1 = hello.textContent // Standard way
}
else {
td1 = hello.innerText // IE way
}
Or you use jQuery:
var td1 = $('#hello').text()
However, don't use innerHTML. This is just bad for many reasons.

If you're interested in a jQuery answer...
var tdText = $('#hello').text();
or
var tdTextTrimmed = $.trim($('#hello').text());

Writing to an iframe from NSTextView

I have built a web based WYSIWYG editor, which Im accessing programatically from my cocoa application. At the moment I'm able to run scripts and retrieve the HTML from the iFrame in the editor, but I'm unable to send text from an NSTextView to the iFrame. Any ideas?
The editor is here http://www.alexmillsdesign.com/Developer/FernEngine/
Cheers
Alex Mills

I'm not an expert in this area but I have written sample code in the past that did something similar to this. The approach I took was the following: in your Cocoa class where you want to update the text insert code similar to
WebScriptObject *webScriptObject = [_webView windowScriptObject];
id result = [webScriptObject callWebScriptMethod:#"setTableRows" withArguments:[NSArray arrayWithObject:fauxData]];
where fauxData is whatever you want to pass to JS, and in the JS source have something similar to
var mytable = document.getElementById("myTable");
var mytbody = document.getElementById("myTbody");
var docFragment = document.createDocumentFragment();
var myNewtbody = document.createElement("tbody");
myNewtbody.id = "myTbody";
var trElem, tdElem, txtNode;
for(var j = 0; j < row_data.length; ++j) {
trElem = document.createElement("tr");
trElem.className = "tr" + (j%2);
tdElem = document.createElement("td");
tdElem.className = "col0";
txtNode = document.createTextNode(row_data[j].lastName);
tdElem.appendChild(txtNode);
trElem.appendChild(tdElem);
tdElem = document.createElement("td");
tdElem.className = "col4";
txtNode = document.createTextNode(row_data[j].firstName);
tdElem.appendChild(txtNode);
trElem.appendChild(tdElem);
docFragment.appendChild(trElem);
}
myNewtbody.appendChild(docFragment);
mytable.replaceChild(myNewtbody, mytbody);
and of course your HTML should have something like
<table id="myTable">
<thead id="myThead">
<tr>
<th>Last</th>
<th>First</th>
</tr>
</thead>
<tbody id="myTbody">
</tbody>
</table>
Obviously this fills in rows of data in a table, but updating text would be similar.