Question

我正在尝试向包含一些输入字段的表单添加新的div。像：

<form id = "def">
<input type = "text" placeholder = "abc">
</form>
<script>

var newdiv = document.createElement("div");
newdiv.innerHTML = "<input type = text placeholder = " + "ghi gyt" + ">";
def.appendChild(newdiv);
</script>

但是当我这样做时，在输出中只有占位符“ghi”可见。在这种情况下，在第一个空间之后的任何东西都是不可见的（“回转”）。如何解决这个问题？

我正在创建一个新div，因为我需要以不同方式设置这些输入字段的样式。我正在使用Chrome 49。

Answer 1

这里的问题是，当你把它写到dom时，它将如下所示：

<input type = text placeholder = ghi gyt>

然而应该是：

<input type = text placeholder = 'ghi gyt'>

因为你需要封装包含空格的字符串。

新代码：

newdiv.innerHTML = "<input type = text placeholder = " + "'ghi gyt'" + ">";

在占位符值之前和之后添加单引号只是一个简单的问题：）

Answer 2

你的行

newdiv.innerHTML = "<input type = text placeholder = " + "ghi gyt" + ">";

将生成此html：

<input type = text placeholder = ghi gyt>

没有字符串分隔符，因此ghi被解释为placeholder值，gyt被解释为属性。

最好使用字符串分隔符来避免此问题：

newdiv.innerHTML = "<input type = 'text' placeholder ='ghi gyt' >";

<form id = "def">
<input type = "text" placeholder = "abc">
</form>
<script>

var newdiv = document.createElement("div");
newdiv.innerHTML = "<input type = 'text' placeholder ='ghi gyt' >";
def.appendChild(newdiv);
</script>

Answer 3

使用正确的引用...

<form id = "def">
<input type = "text" placeholder = "abc avc">
</form>
<script>

var newdiv = document.createElement("div");
newdiv.innerHTML = "<input type = text placeholder = " + "'ghi fff '"  + ">";
def.appendChild(newdiv);
</script>

Answer 4

单引号和双引号之间的交替，在编写属性时，=周围不需要这么多的空格 - 如果用引号将值包装起来，它就更容易阅读所述属性（虽然它没有它们仍然有效，除非值有空格，例如"ghi gyt"）。

'<input type="text" placeholder="ghi gyt">'

＆＃13;

<form id="def">
<input type="text" placeholder="abc">
</form>
<script>

var newdiv = document.createElement("div");
newdiv.innerHTML = '<input type="text" placeholder="ghi gyt">';
def.appendChild(newdiv);
</script>

＆＃13;

Answer 5

试试这个：

＆＃13;

<form id = "def">
<input type = "text" placeholder = "abc">
</form>
<script>

var newdiv = document.createElement("div");
newdiv.innerHTML = "<input type='text' placeholder=" + "'ghi gyt'" + ">";
def.appendChild(newdiv);
</script>

＆＃13;

Answer 6

更改此行

newdiv.innerHTML = "<input type = text placeholder = " + "ghi gyt" + ">";

进入这个

 newdiv.innerHTML = "<input type = text placeholder ='" + "ghigyt" + "' >";

Answer 7

嗨，请尝试这样。它按预期工作

<form id = "def">
<input type = "text" placeholder = "abc">
</form>
<script>

var newdiv = document.createElement("div");
newdiv.innerHTML = "<input type = text placeholder = 'ghi gyi'>";
def.appendChild(newdiv);
</script>

如何在使用.innerHTML时使用占位符？

7 个答案:

试试这个：