javascript [对象 HTMLDivElement] 的显示内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34135379/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
display content of [object HTMLDivElement]
提问by Pipet Filip
My goal is to display input field and span right next to it. To achieve this I generate two divs inside a parent one (two "small-6 columns" inside "row" from foundation framework).
我的目标是在它旁边显示输入字段和跨度。为了实现这一点，我在父级中生成了两个 div（基础框架中的“行”中的两个“小 6 列”）。
If I go for .appendChild(el) and .appendChild(span) it works. When I want to put the divs in work I get [object HTMLDivElement][object HTMLDivElement] printed as result.
如果我选择 .appendChild(el) 和 .appendChild(span) 就可以了。当我想将 div 放入工作中时，我会打印出 [object HTMLDivElement][object HTMLDivElement] 作为结果。
I have tried $(ldiv).html() and many variations, but I just cant figure it out.
我试过 $(ldiv).html() 和许多变体，但我就是想不通。
Thank you for response
谢谢你的回应
var cellRight = row.insertCell(1);
var div = document.createElement('div');
div.class = 'row';
//
var el = document.createElement('input');
el.type = 'text';
el.name = 'produkty_mnozstvi_jednotek' + iteration;
el.id = 'produkty_mnozstvi_jednotek' + iteration;
el.style.width = '3.5rem';
//
var ldiv = document.createElement('div');
ldiv.class = 'small-6 columns';
ldiv.id = 'ldiv' + iteration;
ldiv.innerHTML = el;
//
var span = document.createElement('span');
span.id = 'naskladneni_mnozstvi_jednotek' + iteration;
//
var rdiv = document.createElement('div');
rdiv.class = 'small-6 columns';
rdiv.id = 'rdiv' + iteration;
rdiv.innerHTML = span;
//
div.innerHTML = div.innerHTML + ldiv + rdiv;
//
cellRight.appendChild(div);
//cellRight.appendChild(el);
//cellRight.appendChild(span); //works fine but divs are ignored and span in under the input, not next to it (workaround)
采纳答案by Pipet Filip
found solution in correct use of appendChild()
找到正确使用 appendChild() 的解决方案
var tbl = document.getElementById('tblProdukty');
var lastRow = tbl.rows.length;
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
// left cell
var cellLeft = row.insertCell(0);
var textNode = document.createTextNode(iteration);
cellLeft.appendChild(textNode);
// jednotka bunka
var cellRight = row.insertCell(1);
var div = document.createElement('div');
div.class = 'row';
//
var el = document.createElement('input');
el.type = 'text';
el.name = 'objednavka_mnozstvi_jednotek' + iteration;
el.id = 'objednavka_mnozstvi_jednotek' + iteration;
el.style.width = '3.5rem';
//
var ldiv = document.createElement('div');
ldiv.class = 'small-6 columns';
ldiv.id = 'ldiv' + iteration;
ldiv.appendChild(el);
//
var span = document.createElement('span');
span.name = 'naskladneni_mnozstvi_jednotek' + iteration;
span.id = 'naskladneni_mnozstvi_jednotek' + iteration;
//
var rdiv = document.createElement('div');
rdiv.class = 'small-6 columns';
rdiv.id = 'rdiv' + iteration;
rdiv.appendChild(span);
//
div.appendChild(ldiv);
div.appendChild(rdiv);
//
cellRight.appendChild(div);
回答by Maxim Goncharuk
Use appendChild instead of innerHTML. Maybe it helps you:
使用 appendChild 而不是innerHTML。也许它可以帮助你：
function run() {
var row = document.getElementById('row');
var cellRight = row.insertCell();
var div = document.createElement('div');
div.class = 'row';
var el = document.createElement('input');
el.type = 'text';
el.name = 'produkty_mnozstvi_jednotek' + iteration;
el.id = 'produkty_mnozstvi_jednotek' + iteration;
el.style.width = '3.5rem';
//
var el = document.createElement('input');
el.type = 'text';
el.name = 'produkty_mnozstvi_jednotek' + iteration;
el.id = 'produkty_mnozstvi_jednotek' + iteration;
el.style.width = '3.5rem';
//
var ldiv = document.createElement('div');
ldiv.class = 'small-6 columns';
ldiv.id = 'ldiv' + iteration;
ldiv.appendChild(el);
//
var span = document.createElement('span');
span.id = 'naskladneni_mnozstvi_jednotek' + iteration;
//
var rdiv = document.createElement('div');
rdiv.class = 'small-6 columns';
rdiv.id = 'rdiv' + iteration;
rdiv.appendChild(span);
//
div.appendChild(ldiv);
div.appendChild(rdiv);
cellRight.appendChild(div);
}
