引用和更改容器内HTML按钮的属性

时间:2013-04-07 06:28:21

标签: javascript jquery html

以下是我正在玩的HTML代码。它所做的只是创建一个带有两个按钮的元素:“Element1”(TitleButton)和“Add”。通过单击“添加”,元素将被克隆并分配id =“element 2”。我无法做的是为克隆元素的TitleButton赋值“Element2”。我怎么能这样做,最好是在addNode()函数里面?如果不可能那么其他方式是什么?感谢

<HTML>
<HEAD>
<TITLE>Dynamically add Textbox, Radio, Button in html Form using JavaScript</TITLE> 
<SCRIPT language="javascript">

  function addNode(element) {

    var adding_element = element.parentNode;        
    var added_element=adding_element.cloneNode(true);   
    added_element.setAttribute("id","element 2");

    var cont = adding_element.parentNode;
    cont.appendChild(added_element);   
  }

</SCRIPT>
</HEAD>

<BODY>
<FORM>
  <div name="container" id="container">
    <div name="element 1" id="element 1"> 
      <input type="button" value= "element1"; name="TitleButton" />
      <input type="button" value="Add" name="add[]" onclick="addNode(this)" />
    </div>
  </div>
</FORM>
</BODY>
</HTML>

1 个答案:

答案 0 :(得分:1)

您可以使用firstElementChild属性。

var id = 2;
function addNode(element) {
    var adding_element = element.parentNode;
    var added_element = adding_element.cloneNode(true);
    added_element.setAttribute("id", "element" + id);
    added_element.firstElementChild.setAttribute('value', 'element ' + id);

    var cont = adding_element.parentNode;
    cont.appendChild(added_element);
    id++;
}

http://jsfiddle.net/SUkYg/1/