JavaScript - .Innerhtml Changes Auto Close Tags

Javascript - .innerHTML changes auto close tags

From the documentation:

The innerHTML property sets or returns the HTML content (inner HTML) of an element.

Clearly, the content returned by this property has to be well-formed HTML and will definitely be rendered by browser with closing tags.

If you want to use elements inside elements and update the HTML of your desired GET object. Just create a normal string variable out of the content that you want to add and then sanitize it later on, and when you have the complete content that you desire, then update the .innerHTML with something like:

    //content is a variable that just holds the string representing the HTML Content

    var content = "<div class='large-6 columns Pages' id='Page" + PN + "' style='background-color: #" + i + i + i + ";'>";
    content += "<div class='large-6 columns Pages' id='Page" + PN + "' style='display: none; background-color: #" + i + i + i + ";'>";

    //close the divs or add more elements to the variable content

    Get.innerHTML = content; //At the end.

I hope this gets you started in the right direction.

Self-Closing Tag Issue with document.innerHTML in Javascript

The closing </form> tags show up for me in Firefox when getting .innerHTML.

I'd suggest that the missing tag is due to your markup which I'm pretty sure is invalid:

  <!-- A <form> wrapping a <td> ? -->
<form name="foo" action="foo.php" method="get">
    <td id="td">text:
        <input name="k" type="text" />
         
    </td>
</form>

The parent of a <td> element should be a <tr>, not a <form>.

Given this markup:

<table>
    <tr>
        <form name="foo" action="foo.php" method="get">
            <td id="td">text:
                <input name="k" type="text" />
                 
            </td>
        </form>
    </tr>
</table>

...Firefox gives me this innerHTML for the <table>:

<tbody>
    <tr>
        <form name="foo" action="foo.php" method="get"></form>
            <td id="td">text:
                <input name="k" type="text">
                 
            </td>

    </tr>
</tbody>

It attempts a correction of the invalid markup.

DEMO: http://jsfiddle.net/grM4c/

Javascript innerHTML is automatically overwritten and nullified

That is because onsubmit it will submit the form and refresh the form. So stop the default behaviour using event.preventDefault

function getFormvalue(e) {
  e.preventDefault();
  var x = document.getElementById("myForm");
  var text = "";
  for (var i = 0; i < x.length; i++) {
    if (x.elements[i].value != 'Submit') {
      text += x.elements[i].value + " ";
    }
  }
  document.getElementById("demo").innerHTML = text;
}

<p id="demo">hi</p>

<form id="myForm" name="myForm" onsubmit="getFormvalue(event)">
  First name: <input type="text" name="fname" value="David"><br> Last name: <input type="text" name="lname" value="Beckham"><br>
  <input type="submit" value="Submit">
</form>

InnerHTML is moving tags out of order

You can just use that loop and pull data from it and add inside your str variable . i.e :

   <script>
      var str ="";
       <c:forEach var="list" items="${list}">
        str += "<th><c:out value='${list.sabun}'/></th><th><c:out value='${list.name}'/></th>";
       </c:forEach>
      document.getElementById("searchresult").innerHTML = str;
   </script>

(This code is not tested)

innerHTML removing closing slash from image tag

The second alert just shows you what the browser uses as its internal representation of your image element. You don't need the slash for validation, as validation always is about your page's source, validators don't execute JavaScript that dynamically adds elements to the DOM.

In fact, most browsers handle XHTML internally just the same as HTML, not as an XML-representation of your document. Only when you send your XHTML document with MIME-type application/xhtml+xml, some browsers will render your page using the XML parser.

Also see Ian Hickson's article.

Changing innerHTML of div clears the whole content

This div <div id="message2" /> is not closed as you think it is. Here is a list of HTML's self closing tags. Note that div is not one of them.

See this:

setTimeout(function() {   document.getElementById("message2").innerHTML = "blah";}, 1000);

<html> <head>  <title>Test</title> </head> <body>        <div id="message2" >  <div id="message1" >Hello</div>    </div> </body></html>

---

Related Topics