堆棧內存溢出
  簡體   English   中英

如何使用javascript添加，刪除html中的div或span？

[英]How to add,remove div or span in html using javascript?

 原文  2017-05-17 10:25:17  0   1    javascript/ jquery/ html/ css

問題描述

我正在建立一個網站，並在網站的其中一個網頁中，我想根據從網站上獲取的數據在網頁中添加或刪除span元素（也可以是div元素）。

這是代碼：

HTML部分： 

<html>  
<span class="t1"><input type="text" class="t1" id="t1s<?php the_ID(); ?>">
</span>   <span id="star1s<?php the_ID(); ?>" class="rating1"></span>   
<hr>                            
<span class="t2"><input type="text" class="t2" id="t2s<?php the_ID(); ?>">
</span>   <span id="star2s<?php the_ID(); ?>" class="rating2"></span>   
<hr>                            
<span class="t3"><input type="text" class="t3" id="t3s<?php the_ID(); ?>">
</span>   <span id="star3s<?php the_ID(); ?>" class="rating3"></span>   
<hr>                            
<span class="t4"><input type="text" class="t4" id="t4s<?php the_ID(); ?>">
</span>   <span id="star4s<?php the_ID(); ?>" class="rating4"></span>   
<hr>                            
</html>

在html部分中，應根據從數據庫中獲取的數據添加或刪除span部分。 以下是我需要添加或刪除的代碼， 

 <span class="t4"><input type="text" class="t4" id="t4s<?php the_ID(); ?>">
</span>   <span id="star4s<?php the_ID(); ?>" class="rating4"></span>   
<hr>

JAVASCRIPT PART： 

<script>
var getstarid = "<?php the_ID();?>";

function rating1( stars1 ) {
var ratingfill1=stars1;
var rating_integer1=Math.floor(ratingfill1);
var rating_decimal1=ratingfill1%1;
var rating_dec_trimmed1=rating_decimal1.toFixed(1);  
if((rating_dec_trimmed1==0.1)||(rating_dec_trimmed1==0.2)||
(rating_dec_trimmed1==0.3)||(rating_dec_trimmed1==0.4))
{document.getElementById("star1s"+getstarid).style.width = 
((40*rating_integer1)+18) + 'px';}
if((rating_dec_trimmed1==0.6)||(rating_dec_trimmed1==0.7)||
(rating_dec_trimmed1==0.8)||(rating_dec_trimmed1==0.9))
{document.getElementById("star1s"+getstarid).style.width = 
((40*rating_integer1)+28) + 'px';}
if(rating_dec_trimmed1==0.5)
{document.getElementById("star1s"+getstarid).style.width = 
((40*rating_integer1)+20) + 'px';}
if(rating_dec_trimmed1==0)
{document.getElementById("star1s"+getstarid).style.width = 
(40*rating_integer1) + 'px';}
 }

function rating2( stars2 ) {
var ratingfill2=stars2;
var rating_integer2=Math.floor(ratingfill2);
var rating_decimal2=ratingfill2%1;
var rating_dec_trimmed2=rating_decimal2.toFixed(1);  
if((rating_dec_trimmed2==0.1)||(rating_dec_trimmed2==0.2)||
(rating_dec_trimmed2==0.3)||(rating_dec_trimmed2==0.4))
{document.getElementById("star2s"+getstarid).style.width = 
((40*rating_integer2)+18) + 'px';}
if((rating_dec_trimmed2==0.6)||(rating_dec_trimmed2==0.7)||
(rating_dec_trimmed2==0.8)||(rating_dec_trimmed2==0.9))
{document.getElementById("star2s"+getstarid).style.width = 
((40*rating_integer2)+28) + 'px';}
if(rating_dec_trimmed2==0.5)
{document.getElementById("star2s"+getstarid).style.width = 
((40*rating_integer2)+20) + 'px';}
if(rating_dec_trimmed2==0)
{document.getElementById("star2s"+getstarid).style.width = 
(40*rating_integer2) + 'px';}
 }

function rating3( stars3 ) {
var ratingfill3=stars3;
var rating_integer3=Math.floor(ratingfill3);
var rating_decimal3=ratingfill3%1;
var rating_dec_trimmed3=rating_decimal3.toFixed(1);  
if((rating_dec_trimmed3==0.1)||(rating_dec_trimmed3==0.2)||
(rating_dec_trimmed3==0.3)||(rating_dec_trimmed3==0.4))
{document.getElementById("star3s"+getstarid).style.width = 
((40*rating_integer3)+18) + 'px';}
if((rating_dec_trimmed3==0.6)||(rating_dec_trimmed3==0.7)||
(rating_dec_trimmed3==0.8)||(rating_dec_trimmed3==0.9))
{document.getElementById("star3s"+getstarid).style.width = 
((40*rating_integer3)+28) + 'px';}
if(rating_dec_trimmed3==0.5)
{document.getElementById("star3s"+getstarid).style.width = 
((40*rating_integer3)+20) + 'px';}
if(rating_dec_trimmed3==0)
{document.getElementById("star3s"+getstarid).style.width = 
(40*rating_integer3) + 'px';}
 }

function rating4( stars4 ) {
var ratingfill4=stars4;
var rating_integer4=Math.floor(ratingfill4);
var rating_decimal4=ratingfill4%1;
var rating_dec_trimmed4=rating_decimal4.toFixed(1);  
if((rating_dec_trimmed4==0.1)||(rating_dec_trimmed4==0.2)||
(rating_dec_trimmed4==0.3)||(rating_dec_trimmed4==0.4))
{document.getElementById("star4s"+getstarid).style.width = 
((40*rating_integer4)+18) + 'px';}
if((rating_dec_trimmed4==0.6)||(rating_dec_trimmed4==0.7)||
(rating_dec_trimmed4==0.8)||(rating_dec_trimmed4==0.9))
{document.getElementById("star4s"+getstarid).style.width = 
((40*rating_integer4)+28) + 'px';}
if(rating_dec_trimmed4==0.5)
{document.getElementById("star4s"+getstarid).style.width = 
((40*rating_integer4)+20) + 'px';}
if(rating_dec_trimmed4==0)
{document.getElementById("star4s"+getstarid).style.width = 
(40*rating_integer4) + 'px';}
 }

var second=0,third=0,fourth=0;

var getrate1 = "<?php echo $ratingonequery;?>";
var getrate2 = "<?php echo $ratingtwoquery;?>";
var getrate3 = "<?php echo $ratingthreequery;?>";
var getrate4 = "<?php echo $ratingfourquery;?>";
var getratename1 = "<?php echo $ratingnameonequery; ?>";
var getratename2 = "<?php echo $ratingnametwoquery; ?>";
var getratename3 = "<?php echo $ratingnamethreequery; ?>";
var getratename4 = "<?php echo $ratingnamefourquery; ?>";


 //below is part of javascript that serves as the logic for adding or 
 //removing span element
if((getrate1!="")&&(getratename1!=""))
{rating1(getrate1);document.getElementById("t1s"+getstarid).value 
 =getratename1;}

{
if((getrate2!="")&&(getratename2!="")){second=1;
rating2(getrate2);document.getElementById("t2s"+getstarid).value 
=getratename2;
}
 else if((getrate3!="")&&(getratename3!="")){third=1;
 rating2(getrate3);document.getElementById("t2s"+getstarid).value 
 =getratename3;
        }
 else if((getrate4!="")&&(getratename4!="")){fourth=1;
 rating2(getrate4);document.getElementById("t2s"+getstarid).value 
 =getratename4;
        }           
  }

  {
  if((getrate3!="")&&(getratename3!="")&&(third==0)){third=1;
  rating3(getrate3);document.getElementById("t3s"+getstarid).value 
  =getratename3;
   }
  else if((getrate4!="")&&(getratename4!="")&&(fourth==0)){fourth=1;
  rating3(getrate4);document.getElementById("t3s"+getstarid).value 
  =getratename4;
        }
   }

  if((getrate4!="")&&(getratename4!="")&&(fourth==0)){fourth=1;
  rating4(getrate4);document.getElementById("t4s"+getstarid).value 
  =getratename4;
  } 
 document.getElementById("t1s"+getstarid).disabled = true;
 document.getElementById("t2s"+getstarid).disabled = true;
 document.getElementById("t3s"+getstarid).disabled = true;
 document.getElementById("t4s"+getstarid).disabled = true;
 </script>

CSS PART： 

<style>
.rating1,.rating2,.rating3,.rating4 {
font-size: 48px;
color: #0095f9;
display: inline-block;
overflow: hidden;
}
 .rating1::before { 
  content: "\2605\2605\2605\2605\2605" 
 }
 .rating2::before { 
  content: "\2605\2605\2605\2605\2605" 
  }
  .rating3::before { 
   content: "\2605\2605\2605\2605\2605" 
   }
   .rating4::before { 
    content: "\2605\2605\2605\2605\2605" 
    }
   .t1,.t2,.t3,.t4{background-color:#ffffff;
    float:left;font-size:20px;
    padding: -3px;
    border: none;
    border-bottom: solid 1px #0095f9;
    outline: none;
     }
 </style>

我還包括截圖。 輸出的屏幕截圖

那么，如何在javascript部分中通過邏輯添加或刪除html部分中的span元素。

提前感謝你。

1 個解決方案

解決方案1
 0  2017-05-17 11:18:31

您應該閱讀w3schools以了解正確的內容和方法：
對於javascript： https ： //www.w3schools.com/jsref/met_node_appendchild.asp
對於jquery： https ： //www.w3schools.com/jquery/html_append.asp

您也可以在這些頁面中找到removechild和remove（）。

您還可以閱讀MDN文檔以更全面地了解該主題。 

 $(document).ready(function(){ $("#del").on('click',function(){ $("#delete").remove(); }) $("#add").on('click',function(){ $("#hello").append("<br><span id='added'>I got added</span><br>"); }) }) 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <span id='hello'>Hello</span><br> <span id='delete'> I will get deleted</span><br> <input type="button" id='del' value='Delete span'><br> <input type="button" id="add" value='Add span'> </div>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何使用JavaScript在跨度中添加/刪除HTML數據 使用 JavaScript 在 div 中添加/刪除 HTML 在JavaScript中使用createElement，如何添加 <p> <span>在里面</span> <div> <span>？</span> 如何使用Javascript在點擊時刪除HTML div 如何使用Javascript將div添加到html代碼中 如何使用jQuery在div中添加跨度？ 如何使用 javascript 將跨度拖動或移動到 Div 中 如何將樣式元素添加到div並使用javascript將其刪除 如何使用jQuery或javascript在div中的innerhtml文本之后添加跨度？ 如何使用Javascript或ExtJs刪除HTML塊中沒有屬性的span標簽
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM