CODEWITHSUNDEEP
javascripthtmlcssdom
Ishan Mehta
Ishan Mehta

Reputation: 1

innerHTML displaying differently then expected

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
   </head>
   <body>
      <ul>
         <li id=1 class="draggable" draggable="true">
            <div class="input-group" >
               <p draggable="false" style="width:400px; outline: none" >Text</p>
               <button onclick="testFunction(this)">update</button>
            </div>
         </li>
      </ul>
      <button onclick="myFunction()">Try it</button>
      <p id="demo"></p>
      <script>
         function myFunction() {
           document.getElementById("demo").innerHTML = document.getElementById(1).innerHTML;
         }
         function testFunction(el) {
           var attr = document.createAttribute('contenteditable');
           attr.value = 'true';
           el.parentNode.firstElementChild.setAttributeNode(attr)
           el.parentNode.firstElementChild.focus()
         }
      </script>
   </body>
</html>

When pressing the "update" button and adding new text and lines to the paragraph and pressing the "Try It" button, the new line goes. I expected it to be the same, since I copied the innerHTML.

Upvotes: 0

Views: 358

Answers (3)

Jin Thakur
Jin Thakur

Reputation: 2773

Ok, so Long story short writing id=1 or id ='1' is not causing any issue. It is still grabbing HTML and working fine. The issue is with p tag when you put something inside P tag it starts behaving differently and (BR) break tag was not showing line breaks. I changed P to Div and it looks fine now. I changed/removed the CSS class also .input-group { position: relative; display: -ms-flexbox; /* display: flex; Now you can see line breaks.

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
   </head>
   <body>
      <ul>
         <li id="1" class="draggable" draggable="true">
            <div  >
               <p id='editable' draggable="false" style="width:400px; outline: none" >Text</p>
               
            </div>
         </li>
      </ul>
<button onclick="testFunction('editable')">update</button>
      <button onclick="myFunction()">Try it</button>
      <div id="demo"></div>
      <script>
         function myFunction() {
           document.getElementById("demo").innerHTML = document.getElementById(1).innerHTML;
         }
         function testFunction(el1) {
          el= document.getElementById(el1);
           var attr = document.createAttribute('contenteditable');
           attr.value = 'true';
           el.parentNode.firstElementChild.setAttributeNode(attr)
           el.parentNode.firstElementChild.focus()
         }
      </script>
   </body>
</html>

Upvotes: 0

Sean
Sean

Reputation: 827

When making an HTML element and giving it an id, the id must be in quotations, and it also has to contain atleast 1 character and no whitespaces, so I suggest changing your li element's id from id=1 to id="1a" (or something with a letter in it), and document.getElementById("1a").innerHTML should be changed to that new value (in this instance, "1a")

Upvotes: 2

TJBeanz
TJBeanz

Reputation: 156

If you're expecting the line to look like a bullet-pointed list, then you need to place the result of the innerHTML inside an unordered list. Right now you're placing it in a paragraph.

Consider changing <p id="demo"></p> to:

<ul>
  <li id="demo"></li>
</ul>

Upvotes: 0

Related Questions