堆栈内存溢出
  简体   繁体   English

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

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

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

问题描述

I am building a website and in one of the webpages in the websites,i want to add or remove span element(can be div element also) in the webpage according to data fetched from the website. 我正在建立一个网站，并在网站的其中一个网页中，我想根据从网站上获取的数据在网页中添加或删除span元素（也可以是div元素）。

Here is the code: 这是代码：

HTML PART: 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>

In the html part,span part should be added or removed according to data fetched from database. 在html部分中，应根据从数据库中获取的数据添加或删除span部分。 Below is the code i need to add or remove, 以下是我需要添加或删除的代码， 

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

I have also included screenshot. 我还包括截图。 输出的屏幕截图

So,how to add or remove span element in html part by logic in the javascript part. 那么，如何在javascript部分中通过逻辑添加或删除html部分中的span元素。

Thanking you in advance. 提前感谢你。

1 个解决方案

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

You should read w3schools for proper what is and how to : 您应该阅读w3schools以了解正确的内容和方法：
for javascript : https://www.w3schools.com/jsref/met_node_appendchild.asp 对于javascript： https ： //www.w3schools.com/jsref/met_node_appendchild.asp
for jquery : https://www.w3schools.com/jquery/html_append.asp 对于jquery： https ： //www.w3schools.com/jquery/html_append.asp

You will find removechild and remove() in these pages too. 您也可以在这些页面中找到removechild和remove（）。

You can also read the MDN docs for more thorough understanding of the topic. 您还可以阅读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数据 - How to add/remove html data in a span using javascript 使用 JavaScript 在 div 中添加/删除 HTML - Add/remove HTML inside div using JavaScript 在JavaScript中使用createElement，如何添加 <p> <span>在里面</span> <div> <span>？</span> - Using createElement in JavaScript, how to add <p> and <span> inside of <div>? 如何使用Javascript在点击时删除HTML div - How to remove HTML div on click using Javascript 如何使用Javascript将div添加到html代码中 - How to add a div into html code using Javascript 如何使用jQuery在div中添加跨度？ - How to add span in div using jquery? 如何使用 javascript 将跨度拖动或移动到 Div 中 - How to drag or move a span into the Div by using javascript 如何将样式元素添加到div并使用javascript将其删除 - How do I add a style element to a div and remove it using javascript 如何使用jQuery或javascript在div中的innerhtml文本之后添加跨度？ - How add a span after innerhtml text inside a div using jQuery or javascript? 如何使用Javascript或ExtJs删除HTML块中没有属性的span标签 - How to remove span tag which has no attribute in a HTML block using Javascript or ExtJs
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM