开发者问题收集

使用 Javascript 插入 HTML

2012-09-13
2535
javascript html

更新

我正在尝试使用 onClick 函数在 html 中添加一个包含文本框和简单文本的组

这是按钮的 html 部分 

    <div id="dynamicForm">
        <input type="submit" name="Add_fields" value="+" onclick="generateRow()">
    </div>

和 js 

    <script>
function generateRow()
{
    document.getElementById('dynamicForm').innerHTML +='
                    <input name="dneven" type="text" width="30"/>
                        дневен
                    <select name="zapl">
                        <option selected="selected" value="3">-----</option> 
                        <option 1>платен</option>
                        <option 2>неплатен</option>
                    </select>
                        отпуск от  
                    <select name="god">
                        <option selected="selected" value="11">---</option>
    <option 1>2011</option>
    <option 2>2012</option>
                    </select>г.
                ';
}
</script>

但它什么也没做。我的错误在哪里，以及如何让按钮在按下一次后消失？我将非常感谢您的帮助，在此先谢谢您。

2个回答

此处有语法错误，因为您使用了引号。 

innerHTML+="<input name="name" type="text" width="30"/> some text <input name="name" type="text" width="30"/>";

这是一个语法正确的版本。请注意，字符串用单引号引起来，这意味着双引号括起来的 HTML 属性不会意外终止字符串。 

innerHTML+='<input name="name" type="text" width="30"/> some text <input name="name" type="text" width="30"/>';

如果您仍然遇到问题，您可能需要给我们提供更多代码 - 您是否使用 innerHTML 作为元素实际 innerHTML 的简写，还是在某处声明的变量？

更新

I haven't declared innerHTML anywhere

如果要将 HTML 字符串添加到元素，则需要使用： 

document.getElementById('myElementId').innerHTML += 'html string';

就像放入 

innerHTML += 'html string';

创建一个隐式全局变量（并出现错误，因为您尝试附加到尚未存在）。

更新

I want to insert the HTML right after the button

HTML： 

<div id="dynamicForm">
    <input type="submit" name="Add_fields" value="+" onclick="generateRow()">
</div>

JS： 

function generateRow() {
    document.getElementById('dynamicForm').innerHTML += '<input name="name" type="text" width="30"/> some text <input name="name" type="text" width="30"/>';
}

稍后，您可能希望创建元素并将它们附加到 DOM，而不使用字符串并在脚本而不是 HTML 中添加事件处理程序 - 但这应该可以帮助您入门。

更新

您不能在 JavaScript 中的字符串中使用换行符，因此您需要一行或许多附加内容。 此处有工作示例 。

Fenton
2012-09-13

用户 jnerator 。

  1. 创建 jtag： 

    var jtag = $j.tagArray([
$j.inputText({ name: 'dneven', width: 30 }),
'дневен',
$j.select([
$j.option({ selected: 'selected', value: '3', child: '------' }),
$j.option({ value: '1', child: 'платен' }),
$j.option({ value: '2', child: 'неплатен' })
]),
'отпуск от ',
$j.select({
name: 'god',
child: [
$j.option({ selected: 'selected', value: '11', child: '------' }),
$j.option({ value: '1', child: '2011' }),
$j.option({ value: '2', child: '2012' })
]
})
]);

  2. 获取 html 代码 

    var htmlCode = jtag.html();
// jtag.html() 返回：
// <input name="dneven" width="30" type="text" ></input>дневен<select><option selected="selected" value="3" >------</option><option value="1" >платен</option><option value="2" >неплатен</option></select>отпуск from <select name="god" ><option selected="selected" value="11" >------</option><option value="1" >2011</option><option value="2" >2012</option></select>

  3. 将 HTML 代码插入现有标签 

    document.getElementById('dynamicForm').innerHTML += htmlCode;
Berezh
2012-09-25