Question

我试图在不使用jquery的情况下在javascript中编写此代码。它基本上有两个输入字段：author和quote，点击时应该添加到页面中。

我还试图将其保存在页面上，以防我离开页面。当我执行方法时，添加的引号会消失：

＆＃13;

function radd() {
    if((document.getElementById("q").value!="") && (document.getElementById("a").value!="")) {
        $("#mid-wraper" ).append("<p class='left-bullet'>"+document.getElementById("q").value+"-<span class='yellow-heading'>"+ document.getElementById("a").value+"</span></p>");
        document.getElementById("q").value="";
        document.getElementById("a").value="";
    }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="but" onClick="radd()">Add</button>
    <label for="q">Add ur Quote!</label><input id="q" name="q" />
    <label for="a">The author name</label><input id="a" name="a" />

＆＃13;

Answer 1

function add(){
 //create a new elem
 var el=document.createElement("p");
 //you can assign id, class , etc
 el.id="yourcustomid";
 el.textContent="yourcontent";
 //then add to the wrapper
 var wrapper=document.getElementById("mid-wrapper");
 wrapper.appendChild(el);
 }

此代码显示如何创建新段落并将其添加到包装器js ...

Answer 2

试试这个

function radd()
{
  if((document.getElementById("q").value!="")&&   (document.getElementById("a").value!=""))
    document.getElementById("mid-wraper").innerHTML += "<p class='left-bullet'>"+document.getElementById("q").value+"-<span class='yellow-heading'>"+ document.getElementById("a").value+"</span></p>";
    document.getElementById("q").value="";
    document.getElementById("a").value="";
}

Answer 3

你也可以这样做;在我看来，这更容易。只需创建两个输入，但将其属性设置为隐藏。并使用javascript删除“隐藏”属性。

<button id="but" onClick="radd()">Add</button>
<input id="q" hidden="hidden" >Add ur Quote!</input>
<input id="a" hidden="hidden">The author name</input>

JS部分：

function radd(){
  document.getElementById("q").removeAttribute("hidden");
  document.getElementById("a").removeAttribute("hidden");
}

javascript添加带两个输入的按钮

3 个答案: