✖

All TalkersCode Topics

Follow TalkersCode On Social Media

✖

devloprr.com - A Social Media Network for developers Join Now ➔

jQuery Get And Set Content

jQuery provides many methods to manipulate the document elments like getting thier content and setting another content on page load etc.


jQuery uses four methods to manipulate the elements text(), html(), val(), attr()



Get and Set Content with text()

text() is use to get and set the text content of an element.


/*To Get Content*/
$("button").click(function(){
  alert("Text: " + $("button").text());
});

/*To Set Content*/
$("p").mouseover(function(){
  $("p").text("This is paragraph 1");
});


Get and Set Content with html()

html() is use to get and set the complete content of an element including all markups.


/*To Get Content*/
$("button").click(function(){
  alert("HTML: " + $("button").html());
});

/*To Set Content*/
$("p").mouseover(function(){
  $("p").html("<li>This will become list item</li>");
});


Get and Set Content with val()

val() is use to get and set the value of an element.


/*To Get Content*/
$("button").click(function(){
  alert("Value: " + $("button").val());
});

/*To Set Content*/
$("button").mouseover(function(){
  $("button").val("Button1");
});


Get and Set Content with attr()

attr() is use to get and set the attributes of an element.


/*To Get Content*/
$("button").click(function(){
  alert("Attribute: " + $("p").attr("id"));
});

/*To Set Content*/
$("p").mouseover(function(){
  $("p").attr("id","para1");
});


All DOM Manipulation Methods

  • text( ) is used to get the combined text contents of all matched elements.

  • text( val ) is used to set the text contents of all matched elements.

  • html( ) is used to get the html contents (innerHTML) of the first matched element.

  • html( val ) is used to set the html contents of every matched element.

  • after( content ) is used to insert content after each of the matched elements.

  • append( content ) is used to append content to the inside of every matched element.

  • appendTo( selector ) is used to append all of the matched elements to another, specified, set of elements.

  • before( content ) is used to insert content before each of the matched elements.

  • clone( bool ) is used to clone matched DOM Elements, and all their event handlers, and select the clones.

  • clone( ) is used to clone matched DOM Elements and select the clones.

  • empty( ) is used to remove all child nodes from the set of matched elements.

  • insertAfter( selector ) is used to insert all of the matched elements after another, specified, set of elements.

  • insertBefore( selector ) is used to insert all of the matched elements before another, specified, set of elements.

  • prepend( content ) is used to prepend content to the inside of every matched element.

  • prependTo( selector ) is used to prepend all of the matched elements to another, specified, set of elements.

  • remove( expr ) is used to removes all matched elements from the DOM.

  • replaceAll( selector ) is used to replaces the elements matched by the specified selector with the matched elements.

  • replaceWith( content ) is used to replaces all matched elements with the specified HTML or DOM elements.

  • wrap( elem ) is used to wrap each matched element with the specified element.

  • wrap( html ) is used to wrap each matched element with the specified HTML content.

  • wrapAll( elem ) is used to wrap all the elements in the matched set into a single wrapper element.

  • wrapAll( html ) is used to wrap all the elements in the matched set into a single wrapper element.

  • wrapInner( elem ) is used to wrap the inner child contents of each matched element (including text nodes) with a DOM element.

  • wrapInner( html ) is used to wrap the inner child contents of each matched element (including text nodes) with an HTML structure.

❮ PreviousNext ❯