<!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>当按 "更新 "按钮，在段落中添加新的文字和行数，再按 "试一试 "按钮时，新行数去了。我以为是一样的，因为我复制了innerHTML。
当制作一个HTML元素并给它一个id时，id必须用引号，而且还必须含有 至少1个字 和 无空白所以我建议改变你的 li 元素的 身份证 从 id=1 到 id="1a" (或带字母的东西)，以及 document.getElementById("1a").innerHTML 应改为新的值（本例中为 "1a"）。
如果你希望这一行看起来像一个带圆点的列表，那么你需要将结果放在 innerHTML 在一个无序列表中。 现在你把它放在一个段落中。
考虑改变 <p id="demo"></p> 到。
<ul>
<li id="demo"></li>
</ul>
好了，长话短说，写id=1或id='1'并没有引起任何问题.它仍然在抓取HTML并正常工作.问题是p标签，当你把东西放在P标签内时，它开始表现不同，(BR)break标签没有显示换行。我把P改成了Div，现在看起来很好，我把CSS类也改掉了。.input-group { position: relative; display: -ms-flexbox; * display: flex;现在你可以看到换行符了。
<!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>