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

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" 的占位符是可见的。在这种情况下，第一个 space 之后的任何内容都不可见 ("gyt")。如何解决这个问题？

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

Answer 1

这里的问题是，当您将其写入 dom 时，它将如下所示：

<input type = text placeholder = ghi gyt>

不过应该是：

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

由于需要封装包含space.

的字符串

新代码：

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">'

<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 5

试试这个：

<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 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 时如何使用占位符？

How to use placeholder when using .innerHTML?

html

javascript

innerhtml

placeholder

试试这个：