CODEWITHSUNDEEP
javascriptjqueryhtml
jazzblue
jazzblue

Reputation: 2437

Referencing and changing attributes of HTML button inside container

Below is the HTML code I am playing with. All it does is create an element with two buttons: "Element1" (TitleButton) and "Add". By clicking on "Add" the element is cloned and assigned id="element 2". What I am not able to do is assign value "Element2" for the TitleButton of the cloned element. How can I do it, preferably inside addNode() function? If it is not possible then what are other ways? Thanks

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

Upvotes: 1

Views: 392

Answers (1)

Ram
Ram

Reputation: 144719

You can use firstElementChild property.

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/

Upvotes: 1

Related Questions