如何将输入中的文本添加到文章中？

Question

如何将输入文本作为p元素写到文章中？

<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>

您可以运行此代码段中的此代码，