How to replace in html

How to replace an HTML element with another one using JavaScript?

In this tutorial, we will learn to replace an HTML element with another one using JavaScript.

In some use cases, we require to replace a whole HTML element with a different one. For example, it is very important in the form validation. Suppose we are taking the user’s age from the form, and the user enters the wrong age; we can show the validation message by replacing the HTML element. Another use case where we require to replace an HTML element with another one is dynamic content loading, in which we must show the web page content based on certain criteria such as location, etc.

Here, we will learn 3 approaches to replacing HTML elements of the web page.

Using the replaceWith() method

The first approach uses the replaceWith() method. We require to execute the replaceWith() method by talking the previous element as a reference and by passing a new element as a reference. We can create a new element in the string format.

Syntax

Users can follow the syntax below to use the replaceWith() Javascript method to replace one HTML element with another.

oldElement.replaceWith(newElement);

In the above syntax, oldElement is a replaceable element, and newElement is a replaced element.

Example

In the example below, we have a div element in the HTML containing the ‘oldElement’ id. We call the replaceElement() function on the button click. In the replaceElement() function, we use the createElement() method to create a new ‘h2’ element. Also, we use the textContent property to add the content to the newly created HTML elements. After that, we use the replaceWith() method to replace the oldElement with a newElement.

In the output, users can click the button and see the changes on the web page.

   
Using the replaceWith() method to replace the HTML elements in JavaScript
 
This div is the old element.
 Replace Element function replaceElement() 

Using the outerHTML property

The outerHTML property of any element allows us to replace the whole HTML element with another HTML element. We require to assign a new element value to the outerHTML property to replace the HTML element.

Syntax

Users can follow the syntax below to use the outerHTML property to replace one HTML element with another one.

document.getElementById(id).outerHTML = newEle;

Example

In the example below, we created the ‘

’ element containing the ‘para’ id and some text content. In the replaceElement() function, we create a new HTML element in the string format and assign its value to the outerHTML property of the ‘

’ element.

In the output, users should click the button to replace the ‘

’ element with the ‘’ HTML element.

   
Using the outerHTML property to replace the HTML elements in JavaScript
 
Welcome to the TutorialsPoint!
 Replace Element   

Example

In the example below, we created the select menu containing the different options. Here, we will replace the particular option for the select menu. Also, we created two input fields. One is to take the index number, and another is to take the user’s new value for the option.

In the replaceOption() function, we get the new input value from the users. After that, we access the option using the index value which users have entered in the input. Next, we use the outerHTML property of the option to replace the option with new values.

In the output, enter the zero-based index value in the first input field and the new option value in the second input field, and click the button to replace the option.

   
Using the outerHTML property to replace the options in the select menu
 Index:  
 
 New Value:  
 
  One Two Three Four Five Six  Replace Option   

Using the replaceChild() method

The replaceChild() method allows developers to replace the child nodes of the particular HTML element with a new one. Here, we can replace the first child of the particular element to replace itself with a new element.

Syntax

Users can follow the syntax below to use the replaceChild() method to replace one HTML element with another one.

oldEle.replaceChild(HTMLele, oldEle.childNodes[0]);

In the above syntax, we need to pass the new element as the first parameter of the replaceChild() method and the old element as a second parameter.

Example

In the example below, first we created the ‘h3’ element using the createElement() method. After that, we used the createTextNode() method to create text content. After that, we used the appendChild() method to append the text node to the newly created HTML element.

Next, we execute the replaceChild() method by referencing the old element. Also, we passed the HTMLele as a first parameter, a newly created element, and oldEle.childNodes[0] as a second parameter, the first child of the old element, representing itself.

In the output, click the button and observe the changes on the web page.

   
Using the replaceChild() method to replace the HTML elements in JavaScript
 
Welcome to the TutorialsPoint!
 Replace Element   

We learned three different approaches to replacing one HTML element with another one using JavaScript. In the first approach, we used the replaceWith() method, one of the best and easy approaches. In the second approach, we used the outerHTML property; In the third approach, we used the replaceChild() method, which is generally used to replace child elements.

Источник

How to Replace a content with CSS

Today We will learn How to Replace a content with CSS

Replacing a content with CSS is not something I utilize frequently, but rather there are some particular situations where it proves to be useful. In the event that you can change message on the server-side, I generally suggest that first. CSS content substitution ought to be a final resort, as that is not what CSS is expected for.

In case you’re working inside the constraints of a CMS, or you don’t be able to change your markup, CSS content Replacing may be your exclusive choice.

There are a couple approaches to handle it. We should stroll through the alternatives, and clarify how they work, and why different strategies come up short.

N.B.: In the majority of the accompanying illustrations, you could utilize either pseudo-component, :before or :after

Text Replacement with Pseudo-elements & CSS Visibility

A decent contention can be made this is the best strategy. It requires the littlest measure of markup, and functions admirably for the individuals who have practically no power over their HTML markup. Here’s some HTML:

You want to replace “Original Text” with various content. Here’s how you can replace that text using only CSS.

.replaced-content < visibility: hidden; position: relative; >.replaced-content:after

Giving visibility a value of hidden hides a component, however leaves space where it would have been. As it were, it doesn’t change the design of the page. (This is different from display: none;, which we’ll cover below.) This is the reason we have to utilize positioning the pseudo-element.Without absolutely positioning the pseudo-element, the new content would show up after the spot where the first content should be. By using absolute positioning, we can place the new text in exactly the same spot as the original text was supposed to appear.

Text Replacement with Pseudo-elements & CSS Display

This method requires a little extra markup in your HTML, but uses less CSS. Like the example above, it also utilizes a CSS pseudo-element to insert content onto the page. The HTML (note the extra tag that was not in our example above):

With Pseudo-elements & CSS Display This technique requires somewhat additional markup in your HTML, however utilizes less CSS. Like the case above, it additionally uses a CSS pseudo-component to embed content onto the page. The HTML (take note of the additional tag that was not in our case above):

Utilizing the display property, you can hide the content inside the tag, and then attach a pseudo-element with your new content to the

tag. You do not need to use absolute positioning here because display: none; completely removes the element from the page, and it does affect the layout. It’s as if the text inside the element never existed.
Here’s the CSS:

.replaced span < display: none; >.replaced:after

display: none; will not work without the extra markup

If you didn’t have that extra element (in this case, the tag) inside of your

tag, you cannot use display: none;. Any time you have a parent element with display: none;, all of its child elements, as well as its pseudo-elements, will not be displayed. Even if you set the pseudo-element to display: block;

Then this CSS will not work:

Using Special Characters & Symbols in Replaced Text

You might want to replace text with special characters or symbols, like an ampersand, tilde, emdash or non-breaking space. To do so, you must using the proper character encoding for that symbol. You cannot just place the symbol inside your content: “”; declaration, nor can you use the HTML code (e.g. & & or — ).

This entity conversion chart will convert your special character, and give you the appropriate code to use with the CSS content property.

If you wanted to insert this: 29.9 = ~30

content: “29.9 \003D \0020 \007E 30”;

• \003D is the code for an equals sign (=)
• \0020 is the code for a non-breaking space (   )
• \007E is the code for a tilde (~)

Need to include spaces within each special character code, otherwise the codes run together & CSS doesn’t know where the beginning & end of each code is located.

Источник

How to use JavaScript to replace the content of a document with JavaScript?

In this tutorial, we will learn how we can use JavaScript to replace the content of a HTML document. In JavaScript, we can change the content of HTML document with a combination of following methods −

• open − The open method is used to open a new document which takes two arguments as text/html and replace, where first argument will define the type of new document to be formed and the later one will replace all the adds history on the previous page and help to open new document with ease.

document.open("text/html", "replace");

• write − After creating the new document using the open() method, you need to use the write() method, which takes the content of the new document and you can pass the content of the new document associated inside the HTML tags, as shown below −

document.write("content of new document");

• close − The close() method is used to make the new document to work, as shown in below syntax −

Let us understand the practical implementation of all these methods together with the help of code example.

Algorithm

• Step 1 − In the first step, we will define a button tag with the onclick event in the HTML document, which will later replace the document with new document once it is clicked.
• Step 2 − In this step, we will define the call back function for the onclick event assigned to the button defined in the previous step.
• Step 3 − In the last step, we will write the logic inside the call back function by using the above methods according to the syntax associated with each one to replace the content of the HTML document.

Example 1

The below example will replace the content of HTML document with only one line used inside the paragraph tag −

   
Click and replace this content.
 Replace    

In the above example, we have used only one line inside the write document associated with the paragraph tag, which will replace the whole content of the previous HTML document with that text inside the paragraph tag.

Let us see another example, where we will replace the content of existing HTML document with some complex text.

Algorithm − The algorithm of this example is almost similar to the previous one, you just need to aggregate all the new HTML content inside a string variable by which you want to replace the content of existing document.

Example 2

Below example will explain you, how you can replace the content of existing document with some complex HTML text using the above three methods −

   
Click and replace this content.
 Replace    

In the above example, we have used the same three methods to replace the content of HTML document, but this time we have stored the complex HTML content of the new HTML document in a string variable and then pass it to the write() method which later change the current document content with the content in the variable.

In this tutorial, we have seen how we can use the open(), write(), and the close() methods of JavaScript to change the content of the existing HTML document with some new content by practically implementing and understand their use with the help of three different code example in different situations.

Источник