如何将创建的<input>标签插入带文本的创建<p>标签文本之间？

你遇到的问题是因为用字符串拼接DOM元素时，JS会把元素转换成它的字符串表示形式（也就是[object HTMLInputElement]），而不是把实际的输入框插入到段落里。正确的做法是直接把DOM元素添加到段落节点中，而非通过innerText设置内容。

方法一：使用append()（推荐，简洁直观） #

append()方法可以同时添加文本和DOM元素，完美适配这种需要混合文本与元素的场景：

<!DOCTYPE html>
<html>
<body>

<script>
let PTag = document.createElement("p");
let Input = document.createElement("input");
Input.type = "text";

// 按顺序添加前文本、输入框、后文本
PTag.append("SampleTextOne ", Input, " SampleTextTwo");

document.body.appendChild(PTag);
</script>

</body>
</html>

方法二：分步添加文本节点和元素 #

如果想更清晰理解节点操作逻辑，可以手动创建文本节点再依次插入：

<!DOCTYPE html>
<html>
<body>

<script>
let PTag = document.createElement("p");
let Input = document.createElement("input");
Input.type = "text";

// 创建前后两段文本对应的节点
let text1 = document.createTextNode("SampleTextOne ");
let text2 = document.createTextNode(" SampleTextTwo");

// 按顺序将节点添加到段落中
PTag.appendChild(text1);
PTag.appendChild(Input);
PTag.appendChild(text2);

document.body.appendChild(PTag);
</script>

</body>
</html>

原代码失效原因 #

innerText的作用是设置或获取元素的纯文本内容，当你执行"SampleTextOne " + Input + " SampleTextTwo"时，Input作为DOM对象会被JS自动调用toString()方法，转换成[object HTMLInputElement]字符串，最终段落里只会显示这段文本，而非实际的输入框。

内容的提问来源于stack exchange，提问作者Bman1148