如何將輸入中的文本添加到文章中？

Question

如何將輸入的文本作為ap元素寫到文章中？

<article id="article">
    <h1 id="article1">Articles</h1>
    <p>this is p1</p>
</article>
<input type="text" name="links" id="playlist" size="60">
<input type="button" value="Add" onclick="addLink();">
<style>
    #article {
        border: 1px solid red;
    }
</style>
<script>
    function addLink() {
        var addLink = document.getElementById("playlist").value;
        document.getElementById("article").innerHTML("<p>" + addLink + "</p>" + "<br>");
    }
</script>

Answer 1

Element.innerHTML不是函數。 這是一個財產。 使用+= ：

 function addLink() { var addLink = document.getElementById("playlist").value; document.getElementById("article").innerHTML += "<p>" + addLink + "</p>" + "<br>"; } 

 #article { border: 1px solid red; } 

 <article id="article"> <h1 id="article1">Articles</h1> <p>this is p1</p> </article> <input type="text" name="links" id="playlist" size="60"> <input type="button" value="Add" onclick="addLink();"> 

Answer 2

innerHTML不是方法，而是屬性，因此請使用=代替innerHTML(val) ：

 function addLink() { var addLink = document.getElementById("playlist").value; document.getElementById("article").innerHTML = "<p>" + addLink + "</p>" + "<br>"; } 

 #article { border: 1px solid red; } 

 <article id="article"> <h1 id="article1">Articles</h1> <p>this is p1</p> </article> <input type="text" name="links" id="playlist" size="60"> <input type="button" value="Add" onclick="addLink();"> 

Answer 3

  <article id="article"> </article> <input type="text" name="links" id="playlist" size="60"> <style> #article { border: 1px solid red; } </style> <script> var inp = document.getElementById("playlist"); inp.onkeyup = function () { var text = document.getElementById("playlist").value; document.getElementById("article").innerHTML=text; } </script> 

您可以在此代碼段中運行此操作，以使文章在輸入時發生變化