07.jQuery changing and manipulating HTML elements and attributes

-

 


jQuery changing and manipulating HTML elements and attributes

 

Get Content - text(), html(), and val() 

Three simple, but useful, jQuery methods for DOM manipulation are:

1.   text() - Sets or returns the text content of selected elements - $("#test").text();

2.  html() - Sets or returns the content of selected elements (including HTML markup) -$("#test").html();

3.   val() - Sets or returns the value of form fields - $("#test").val()


Get Attributes

$("#One").attr("href"); - <p><a href="https://www.abc.com" id="One">W3Schools.com</a></p>

Set Content - text(), html(), and val()

$("#test1").text("Hello world!");

$("#test2").html("<b>Hello world!</b>"); 

$("#test3").val("Dolly Duck");


<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text(function(i, origText){
return "Old text: " + origText + " New text: Hello world! (index: " + i + ")";
});
});

$("#btn2").click(function(){
$("#test2").html(function(i, origText){
return "Old html: " + origText + " New html: Hello <b>world!</b> (index: " + i + ")";
});
});
});
</script>
</head>
<body>

<p id="test1">This is a <b>bold</b> paragraph.</p>
<p id="test2">This is another <b>bold</b> paragraph.</p>

<button id="btn1">Show Old/New Text</button>
<button id="btn2">Show Old/New HTML</button>

</body>
</html>



Set Attributes - attr()

$("#One").attr({
    "href" : "https://www.abc.com/jquery/",
    "title" : "Abc jQuery Tutorial"
});

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#w3s").attr("href", function(i, origValue){
return origValue + "/jquery/";
});
});
});
</script>
</head>
<body>
<p><a href="https://www.w3schools.com" id="w3s">W3Schools.com</a></p>
<button>Change href Value</button>
</body>
</html>



Add Elements

We will look at four jQuery methods that are used to add new content:

  • append() - Inserts content at the end of the selected elements
  • prepend() - Inserts content at the beginning of the selected elements
  • after() - Inserts content after the selected elements
  • before() - Inserts content before the selected elements

 

append()  - $("p").append("Some appended text.");

prepend()  - $("p").prepend("Some prepended text.");

after()  - $("img").after("Some text after");

before()  - $("img").before("Some text before");

var txt1 = "<b>I </b>";                    // Create element with HTML 
var txt2 = $("<i></i>").text("love ");     // Create with jQuery
var txt3 = document.createElement("b");    // Create with DOM
txt3.innerHTML = "jQuery!";
$("img").after(txt1, txt2, txt3);          // Insert new elements after <img>

 

 

 

 

Remove Elements

  • remove() - Removes the selected element (and its child elements)
  • empty() - Removes the child elements from the selected element

$("#div1").remove();

$("#div1").empty();

$("p").remove(".test");

$("p").remove(".test, .demo");

 

jQuery Manipulating CSS

jQuery has several methods for CSS manipulation. We will look at the following methods:

  • addClass() - Adds one or more classes to the selected elements
  • removeClass() - Removes one or more classes from the selected elements
  • toggleClass() - Toggles between adding/removing classes from the selected elements
  • css() - Sets or returns the style attribute

.important {
  font-weight: bold;
  font-size: xx-large;
}

.blue {
  color: blue;
}

$("#div1").addClass("important blue");

$("h1, h2, p").removeClass("blue");

$("h1, h2, p").toggleClass("blue");

 

jQuery css() Method

The css() method sets or returns one or more style properties for the selected elements.\

$("p").css({"background-color": "yellow", "font-size": "200%"});

 


Comments

Post a Comment

Popular posts from this blog

09.Data Binding.

-
Image
Data Binding. Data binding ආකාර 2 කි. One-way Data Binding - component to view (DOM) or view to the component Two-way Data Binding - component to view and view to the component. One-way Data Binding in Angular Component to view (DOM) or view to component One-way data binding will bind the data from the component to the view (DOM) or from view to the component. One-way data binding is unidirectional. You can only bind the data from component to the view or from view to the component. a). From Component to View      01.   Interpolation Binding      02.   Property Binding      03.   Attribute Binding      04.   Class Binding      05.   Style Binding b). From View to Component      01.  Event binding  From Component to View     Style and Class Binding Directives – Directives are nothing but custom html element that angular provi...
Read more

Database - Topics

-
Image
 Topics  01. Steps in SQL Query Execution 02. How does the database create a query plan 03. How Query Plan Caching Works 04. What is the need for an execution plan? 05. How Do Query/ Query Plan Execute (Inside MySQL Server) 06. Importance Of Undo Log 07. How Row Lock Is Handle When Query On The Table Row 08. Technique to recover the committed changes 09. Auditing technique 10. Query cache 11. DB connection pool 12. What is ACID? 13. Optimizing SQL queries
Read more

02. Spring – Creating spring project clone it with GIT step by step.

-
Image
  Creating spring project clone it with GIT step by step. 01. Create an empty GIT repository and select a repository name. 02.   Check to add README.md and technology to add it inside the gitignire file0- it will include all the generated class when we complete the application. 03.      Copy the github repository URL. 04 . Open eclipse and go to,             Window – Show View – Other - Type git on the folder and select git repositories. 05.   Now clone this repository at your desired location in which we are going to keep the project specific file . a)         a)  Step One.             b)  Step  Two .          c)    Step Three. Both projects are generated as bellows           d) Step Four  Open the gitingnore file and ignore the target folder of the project. All the class files which are ...
Read more