2つの入力を持つjavascriptボタンを追加

Question

jqueryを使用せずにjavascriptでこれを書き込もうとしています。基本的に2つの入力フィールドがあります：著者と見積もり、クリック時にページに追加する必要があります。

私はページを退去する場合も、ページに保存しようとしています。

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=""; 
 
    } 
 
}

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

Answer 1

...新しい段落を作成し、ラッパーのJSに追加する方法を示します：追加の引用は、私はメソッドを実行すると消えます試してみてください

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 2

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); 
} 

このコードは

Answer 3

これは、私の意見でははるかに簡単です。両方の入力を作成するだけで、属性をhiddenに設定するだけです。 javascriptを使用して、 "hidden"属性を削除します。

<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"); 
}