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

【问题标题】：How to use placeholder when using .innerHTML?使用 .innerHTML 时如何使用占位符？
【发布时间】：2016-08-05 11:13:14
【问题描述】：

我正在尝试将新的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”可见。在这种情况下，第一个空格之后的任何内容都是不可见的（“gyt”）。如何解决这个问题？

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

【问题讨论】：

在double-quoted-string 中使用" 会破坏字符串文字...使用"<input type = 'text' placeholder ='ghi gyt'>";
我没有使用 " 内部字符串.. 我将几个字符串附加在一起..
您必须在标记中包含空格或除 a-z、数字、点、破折号以外的任何字符的属性值周围使用引号（请参阅W3C HTML 5 §4.4）。属性名称、'=' 和值之间没有空格也更整洁，所以考虑... "<input type='text' placeholder='" + "ghi gyt" + "'>" ...。 ;-)
@RayonDabre 谢谢.. 它有效！
啊，看来我太慢了。干得好 RobG，干得好。

标签： javascript html innerhtml placeholder

【解决方案1】：

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

<input type = text placeholder = ghi gyt>

然而它应该是：

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

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

新代码：

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

这只是在占位符值之前和之后添加单引号的简单问题:)

【讨论】：

【解决方案2】：

您好，请尝试这样。它按您的预期工作

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

【讨论】：

【解决方案3】：

改变这一行

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

进入这个

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

【讨论】：

如果您阅读允许/评论的答案，您会看到这个已经存在。
我一发布就弹出了这里的所有答案:)。最初有 0 个答案。
@sciencefyll 这是我第一次在这里发帖。就像我提到的，当我开始回答时没有答案！我认为反对票不公平:(
你应该注意 dom 更新，会有警告说有新的答案注册。既然你是新来的，我希望我可以删除我的反对票，但似乎为时已晚......无论如何欢迎来到stackoverflow，快乐解决！ :)
@sciencefyll 谢谢。

【解决方案4】：

试试这个：

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

【讨论】：

【解决方案5】：

在单引号和双引号之间交替使用，在编写属性时，您不需要在 = 周围留太多空格——如果将值括在引号中，则更容易阅读所述属性（尽管没有它们仍然有效，除非值包含空格，例如 "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>

【讨论】：

【解决方案6】：

你的线

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>

【讨论】：

type = text placeholder ?

【解决方案7】：

使用正确的引用...

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

【讨论】：