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”)
Solution 1 :
Solution 2 :
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>
Solution 3 :
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>Problem :
<!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.
Comments
Comment posted by Dai
document.getElementById(1)
Comment posted by developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode
Also, you should avoid using
Comment posted by how to add new
- onclick with javascript
Does this answer your question?