Question

我正在尝试使用javascript在div中动态创建一个复选框。这是我代码的一部分

var input = document.createElement('input');
input.setAttribute('id', 'chkFilm_1');
input.setAttribute('type', 'checkbox');
input.setAttribute('name', 'four');
input.setAttribute('style', 'margin-left:2px;');

var divFilm = document.createElement('div');
divFilm.className = "ChekMarkWrap";   
divFilm.appendChild(input);
divFilm.appendChild(document.createElement('br'));
divFilm.innerText = "film";

我想要实现的是在div的innerText之前插入复选框。但是文本总是在div innerText之后。

Answer 1

看起来您的问题可能就行了：

divFilm.innerText = "film";

将替换divFilm文本而不是附加到它。

以下代码似乎有效

var input = document.createElement('input');
input.setAttribute('id', 'chkFilm_1');
input.setAttribute('type', 'checkbox');
input.setAttribute('name', 'four');
input.setAttribute('style', 'margin-left:2px;');

var divFilm = document.getElementById("film")

divFilm.appendChild(input)
divFilm.appendChild(document.createElement('br'));
divFilm.innerHTML += 'film';

这会将这些元素添加到html中的id为“film”的div中。

这适用于以下链接http://jsfiddle.net/yeQeC/

Answer 2

怎么样：

divFilm.innerHTML =  divFilm.innerHTML + input.outerHTML+"film" ;

甚至更短：

divFilm.innerHTML +=  input.outerHTML+"film" ;

Answer 3

在追加div后尝试附加复选框，试试这个：

divFilm.parentNode.insertBefore(input, divFilm);

Answer 4

divFilm.insertBefore(input, divFilm.childNodes[0]);

http://jsfiddle.net/QgAt3/

如何在div的innerText之前插入复选框

4 个答案: