stackoom
  简体   繁体   中英

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

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

Question

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.

Here is the code:

HTML PART: 

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

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

I have also included screenshot. 输出的屏幕截图

So,how to add or remove span element in html part by logic in the javascript part.

Thanking you in advance.

1 answers

solution1
 0  2017-05-17 11:18:31

You should read w3schools for proper what is and how to :
for javascript : https://www.w3schools.com/jsref/met_node_appendchild.asp
for jquery : https://www.w3schools.com/jquery/html_append.asp

You will find removechild and remove() in these pages too.

You can also read the MDN docs for more thorough understanding of the topic. 

 $(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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to add/remove html data in a span using javascript Add/remove HTML inside div using JavaScript Using createElement in JavaScript, how to add <p> and <span> inside of <div>? How to remove HTML div on click using Javascript How to add a div into html code using Javascript How to add span in div using jquery? How to drag or move a span into the Div by using javascript How do I add a style element to a div and remove it using javascript How add a span after innerhtml text inside a div using jQuery or javascript? How to remove span tag which has no attribute in a HTML block using Javascript or ExtJs
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM