Question

也许问题听起来很熟悉，但事实并非如此。我希望在div之后添加HTML代码（多行），从其他文本域获取值。我是JS的新手，可以帮助我弄清楚如何用JS做到这一点？我想要动态创建相同的代码块。我尝试过：innerHTML，createElement和iframe，它不起作用（对我而言）。

function addField(){
//get value from elsewhere
var valueCategory =document.getElementById('newCateg').value;
//get value from elsewhere
  var newField=document.getElementById('newField').value;
//get value from elsewhere  
var selOption=document.option[selectedIndex.text];

var newField=document.getElementsByClassName("categories");

  
          
}

<div class="categories">
 <p class="titles" >
 <input type="checkbox" class="check" onchange="checkAll('divID',true,elem)" /> Category Music </p>
  <hr/>
<div class="field">      
	<input type="checkbox" class="check"/>    
        <label> Rock</label>
        <input type="text" />
        </br>
</div>
      <input type="checkbox" class="check" />   
        <label>Classical </label>
        <input type="text"  id="c1" />
   	</br>
	<input type="checkbox" class="check" />   
        <label>Rap  </label>
        <input type="text"  id="c1" />
      </br>
	<hr/>
</div>


<div class="categories">
 <p class="titles" >
 <input type="checkbox" class="check" onchange="checkAll('divID',true,elem)" />  Here gets the  new category which get VALUE from other text </p>
  <hr/>
<div class="field">      
	<input type="checkbox" class="check"/>    
        <label> Subcategory ..Here gets the  VALUE from other text</label>
        <input type="text" />
        </br>
</div>
      <input type="checkbox" class="check" />   
        <label>Subcategory...Here goes gets  VALUE from other text </label>
        <input type="text"  id="c1" />
   	</br>
	<input type="checkbox" class="check" />   
        <label>Subcategory...Here gets the  VALUE from other text  </label>
        <input type="text"  id="c1" />
      </br>
	<hr/>
</div>

Answer 1

嗯，我真的不明白你想要达到什么目标，但是如果你想创建一个能够获得其他元素价值的新领域，请尝试以下方法：

＆＃13;

function addField(){
 //Get the others fields values
  var Rock =document.getElementById("Rock").value;
  var Classical =document.getElementById("classical").value;
  var Rap =document.getElementById("Rap").value;

 //Get the div in wich you will create the new Field.
  var newField1=document.getElementById("RockCategory");
  var newField2=document.getElementById("ClassicalCategory");
  var newField3=document.getElementById("RapCategory");
 //Create the new Field and give it the others fields values.
  newField1.innerHTML="Rock: "+Rock;
  newField2.innerHTML="Classical: "+Classical;
  newField3.innerHTML="Rap: "+Rap;
}

＆＃13;

<div class="categories">
 <p class="titles" >
 <input type="checkbox" class="check" /> Category Music </p>
  <hr/>
<div class="field">      
	<input type="checkbox" class="check"/>    
        <label> Rock</label>
        <input type="text" id="Rock"/>
        </br>
</div>
      <input type="checkbox" class="check" />   
        <label>Classical </label>
        <input type="text"  id="classical" />
   	</br>
	<input type="checkbox" class="check" />   
        <label>Rap  </label>
        <input type="text"  id="Rap" />
      </br>
	<hr/>
</div>

 <input type="button" onclick="addField()" value="AddField"/> 

<div class="categories">  
  Music Ctegories:  
  </br>
	<div id="RockCategory">
    </div>
      </br>
    <div id="ClassicalCategory">
    </div>
      </br>
    <div id="RapCategory">
    </div>
      </br>
	<hr/>
</div>

＆＃13;

Answer 2

在jQuery中，您的代码应该如下所示：

$("#secondFieldId").val($("#firstFieldId").val());

或者如果您希望文本显示在div中，请使用：

$("#divId").html("$("#fieldId").val());

如果你希望它被一个动作触发，可以在输入字段上说“keydown”使用这个：

$("#inputFieldId").on("keydown", function(){
    $("#divId").html("$("#fieldId").val());
});

有关jQuery read的更多信息：jQuery site

用JS创建动态HTML代码

2 个答案: