我想在javascript中使用innerHTML，但它不起作用

Question

我需要传递一个来自javascript的id的html行，我使用了innerHTML，但我无法使其工作，如果我使用一个简单的字符串，它可以工作

function passid(id){
var lengthOfName = id
document.getElementById('output').innerTEXT = "<input type="text" id="test" name="test" value="'lengthOfName'">";

};

<div id="output"></div>

Answer 1

您应该使用backticks和innerHTML。

function passid(id){
var lengthOfName = id
document.getElementById('output').innerHTML = `
<input type="text" id="test" name="test" value=${lengthOfName}>`;
};

Answer 2

您要做的是一些小的修复

function passid(id){
var lengthOfName = id
document.getElementById('output').innerHTML = `<input type="text" id="test" name="test" value="${lengthOfName}">`;

};

Answer 3

在您的示例代码中，您使用带有HTML字符串的innerTEXT。这将不会解析字符串中的HTML并将元素输入到DOM。

根据您"使用javascript传递id"的方式，您可能需要按照其中一条注释中的建议推迟代码。但是，您可以使用insertAdjacentHTML和"afterbegin"作为HTML字符串的位置。此外，我会使用模板文字，并将可变美元符号和大括号括起来，如so＝>CCD_ 1。

看看我的例子，如果这不是你想要的，请告诉我，我会妥善处理我的答案

let id = "myid";
function passid(id){
let el = document.getElementById('output');
let str = `<input type="text" id="test" name="test" value="${id}">`;  
el.insertAdjacentHTML('afterbegin', str);
};
passid(id);

<div id="output"></div>