createElement method (Windows)

0 out of 3 rated this helpful - Rate this topic

Creates an instance of the element for the specified tag.

Document Object Model (DOM) Level 3 Core Specification, Section 1.4

Syntax

var retval = document.createElement(eTag);

Parameters

eTag [in]

Type: String

A String that specifies the name of an element.

Return value

Type: HTMLElement

Returns a reference to the new element.

Standards information

Document Object Model (DOM) Level 3 Core Specification, Section 1.4

Remarks

You must perform a second step when you use createElement to create the input element. The createElement method generates an input text box, because that is the default input type property. To insert any other kind of input element, first invoke createElement for input, and then set the type property to the appropriate value in the next line of code.

Attributes can be included with the eTag as long as the entire string is valid HTML. To include the NAME attribute at run time on objects created with the createElement method, use the eTag.

Use the eTag to include attributes when form elements are created that will be reset using the reset method or a BUTTON with a TYPE attribute value of reset.

Examples

This example uses the createElement method to dynamically update the contents of a Web page by adding an element selected from a drop-down list box.


<SCRIPT>
function fnCreate(){
    oData.innerHTML="";
    var oOption=oSel.options[oSel.selectedIndex];
    if(oOption.text.length>0){
    var aElement=document.createElement(oOption.text);
    eval("aElement." + oOption.value + "='" + oText.value + "'");
    if(oOption.text=="A"){
        aElement.href="http://www.bing.com";
   }
   }
    oData.appendChild(aElement);
}
</SCRIPT>
<SELECT ID="oSel" onchange="fnCreate()">
<OPTION VALUE="innerText">A
<OPTION VALUE="value">&lt;INPUT TYPE="button"&gt;
</SELECT>
<SELECT ID=oText onchange="fnCreate()">
<OPTION>
<OPTION VALUE="Text">Text
<OPTION VALUE="More and More Text">More and More Text
</SELECT>
<SPAN ID="oData" ></SPAN>

In a Windows Store app using JavaScript, you can also specify all the attributes inside the createElement method by using an HTML string for the method argument. The following example demonstrates how to dynamically create two radio buttons utilizing this technique.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Radio Button DOM Insertion</title>
  <script type="text/javascript">
    function createRadioButton(){
      // Create radio button object with value="First Choice" and then insert this element into the document hierarchy.
      var newRadioButton = document.createElement("<input type='radio' name='radio1' value='First Choice' />")
      document.body.insertBefore(newRadioButton); // Since the second argument is implicity null, this inserts the radio button at the end of this node's list of children ("this" node refers to the body element).
      
      // Create radio button object with value="Second Choice" and then insert this element into the document hierarchy. 
      newRadioButton = document.createElement("<input type='radio' name='radio2' value='Second Choice' />")
      document.body.insertBefore(newRadioButton); // Insert the radio button at the end of this node's list of children (which is directly after the radio button we just inserted).
    }

    function displayHTML(htmlString) {
      var temp = document.createElement('div');
      temp.appendChild( document.createTextNode(htmlString) );
      document.getElementById('displayBox').innerHTML = "<pre>" + temp.innerHTML + "</pre>";
    }
  </script>
</head>

<body>
  <form>
    <input type="button" onclick="createRadioButton()" value="Create two Radio Buttons" />
    <br />
    <input type="button" onclick="displayHTML(document.body.outerHTML)" value="Click here to see HTML" />
  </form>
  <div id="displayBox"></div>
</body>
</html>

createElement method