JQuery: find and replace instances of HTML in my page

Question

I have some HTML in my page within a DIV.. There are multiple instances of it throughout the page, and its setting textbox (or other items)..

Id like to do a JQuery search and replace all occurrences of the HTML within a DIV (apexir_rollover_content) to change the item to a simple display.. There are multiple instances of the DIV..

Here is an html snippet..

<div id="apexir_rollover_content" style="height: 210px;">

<a href="javascript:void(false);">
    <input type="text" value="" maxlength="2000" size="6" name="f05"></input>
</a>
<a href="javascript:void(false);">
    <input type="text" value="23162" maxlength="2000" size="6" name="f05"></input>
</a>

I want to change the line below so that it just has the value as standard text..

<input type="text" value="23162" maxlength="2000" size="6" name="f05"></input>

I can't do a global replace, as there will be other textbox items that I need to keep...

If someone could help, Id be grateful...

Thx

Can you clarify/explain this sentence : Id like to do a JQuery search and replace all occurrences of the HTML within a DIV (apexir_rollover_content) to change the item to a simple display. I don't understand what you want — singe3
– singe3, Commented Aug 12, 2014 at 13:32
How is this input different from the other inputs on your page? Other than its value? — George
– George, Commented Aug 12, 2014 at 13:39
Hi George... Basically if the text box is inside a DIV as above, then I want to change the text item to a standard piece of text If its a textbox, or other control outside of the DIV, then I want the JQuery to leave it alone... The items inside the DIV have the wrong characteristics, and I cannot change them on the server... — Richard Legge
– Richard Legge, Commented Aug 12, 2014 at 14:17

Alain M. Lafon · Accepted Answer · 2014-08-12 14:07:39Z

1

Normally you would want to have a class or id to find the correct element. Since you do not have this, you can

1: use a jQuery selector to find the input element that needs to be replaced

jQuery("input[type='text']")

2: move one element above

.parent()

3: and replace the input field

.html('<input type="text" value="23162" maxlength="2000" size="6" name="f05"></input>')

I have created a jsFiddle with the code: http://jsfiddle.net/sdhxybj1/

This is the JS jQuery code that you can use:

jQuery("input[type='text']").parent().html('<input type="text" value="23162" maxlength="2000" size="6" name="f05"></input>')

edited Aug 12, 2014 at 14:07

answered Aug 12, 2014 at 13:36

Alain M. Lafon

1,7081 gold badge13 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Richard Legge Over a year ago

Hi Mumen. Thanks for this.. Probably a bit more information: I need to only find the code if it is inside the DIV. There will be other text boxes on the page, and 2.. I need to then change the line so that its standard text.. (which can be clicked on with the event..) I run the jsFiddle.. (first time Ive seen or used this and its pretty neat..) but nothing happens...

Alain M. Lafon Over a year ago

If you only need it when inside the div, you can change the jQuery selector to jQuery("div input[type='text']").

Alain M. Lafon Over a year ago

If you want to run the jsFiddle, you need to hit the "Run" button(;

Alain M. Lafon Over a year ago

@RichardLegge If you want to learn more about selectors, here is the documentation for it: api.jquery.com/category/selectors

gaetanoM · Accepted Answer · 2014-08-12 14:15:06Z

0

Moreover, if You intend only replace as in the previous solution only some inputs the jquery statement can be filtered as in the following:

$("input[type='text']").filter('[name="f05"]').parent().html('<input type="text" value="23162" maxlength="2000" size="6" name="f05"></input>');

But if You intend to replace each anchor with the inner input so You could use:

        $('#apexir_rollover_content a').each(function() {
            var innerEle = $(this).children();
            $(this).replaceWith(innerEle);
        });

answered Aug 12, 2014 at 14:15

gaetanoM

42.1k6 gold badges45 silver badges63 bronze badges

2 Comments

Richard Legge Over a year ago

your help is much appreciated guys.. I will read the documentation... One final question.. How would I change (remove) the type i.e the HTML string from an input type to a standard piece of text for each item?

gaetanoM Over a year ago

Simply, if you wish input translated into paragraphs (i.e.) so:

$('#apexir_rollover_content a').each(function() {                 var innerEle = $(this).children();                 var simpleParagraph = $('<p></p>').text(innerEle.val());                 $(this).replaceWith(simpleParagraph);             });       });

bye

Collectives™ on Stack Overflow

JQuery: find and replace instances of HTML in my page

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related