Working with Element content jQuery

The jQuery library provides us with a convenient toolkit for working with the content of an element in the form of methods html and text.

Working with markup

To get or set the markup, the method is used HTML, which has the following use cases:

• html(): gets the HTML markup of the first element in the set
• html(‘new_markup’): sets the markup of the element to the HTML code passed as a parameter
• html(function): set markup using the function

Get and change the markup of the element:

// getting the markup for the list item and outputting it to the console
varhtml = $('li.punkt2').html();
console log(html);
    
// setting up a new markup for the list item
$('li.punkt1').html("Item 1 <ul class='submenu'><li>Subitem 1.1</li></ul>")

The new markup completely overwrites the old one. If we just want to add a piece of markup to the old one, then we can simply attach the new markup to the old one:

 
var oldHtml = $('div.header').html();

$('div.header').html(oldHtml+"<p> New paragraph</p>")

You can also use a function that runs through all the elements of the selection and takes as parameters the current index of the element in the selection and its current markup. With a function, we can rewrite the previous example as follows:

  $('div.header').html(function(index,oldValue){
        console.log("Old markup: " +oldValue);
        return oldValue+"<p> New paragraph</p>";
    });

Working with element text

To work with text, the method is used text(), the action of which is in many ways similar to the action of the html method, only instead of markup, we manage the text of the element:

• text(): gets the text of the first element in the set
• text(‘new_text’): sets the text of the element to the string passed as a parameter
• text(function): Set the text using the function

var oldText = $('div.header').text();
console.log(oldText);

$('div.header').text("Article Title");

// function use
$('div').first().text(function(index,oldValue){
    console.log("Old text: " +oldValue);
    return "New text";
});

However, the method text should be used with caution. If the element has internal markup, then it is completely replaced by the new text content. Therefore, if you need to change the text without changing the markup, then it is better to use other methods.

Working with Form Elements

The method is used to get form element values val(). In principle, it is similar to the html() and text() methods, only it is used to set the values ​​of form components.

• val(): gets the value of the first element in the set
• val(‘new_value’): sets the value of the element to the string passed as a parameter
• val(function): set value using function

<input type="text" value="Enter value" />
<script type="text/javascript">
$(function(){
    // getting the value of the text field
    var oldValue = $('input[type="text"]').val();
    console.log(oldValue);
    
    $('input[type="text"]').first().val("Enter your login");
    
    // use function to set value
    $('input[type="text"]').first().val(function(index,oldValue){
        console.log("Old value: " +oldValue);
        return "Enter password";
    });
});
</script>