Insert a new string of text into an element already present using jQuery

I need help appending some additional text to the existing content on my website using jQuery. I have tried various methods like parent(), child(), next(), and find(), but haven't had any success. Any assistance would be greatly appreciated. Take a look at the image below.

One of my attempts looked like this:

$('.align-left').next().append("<p>Usynlig tewfekst test</p>");

Here is the relevant HTML, with unnecessary tags removed for clarity:

<dl class="store-details-info">
  <dt><strong>Adresse:</strong></dt>
  <dd>Solheimveien&nbsp;10,&nbsp;1473&nbsp;Lørenskog</dd>
  <dt><strong>Kundesenter:</strong></dt>
  <dd>21 00 21 21</dd>
  <dt><strong>E-post:</strong></dt>
  <dd><a href="https://www.elkjop.no/kontakt-oss" target="_self">Kontakt oss</a></dd>
</dl>
<div class="align-left any-1-1">
  <strong>Om butikken </strong>
  <p>
  </p>
  <div class="oph-module">
    <div style="height: 25px;">
      <div class="element library-elkjop-gui"><i style="color: #141b4d;" class="icon-lightbulb"></i>Åpningstider</div>
    </div>
    <div class="oph-header">
      <div>Ukedag</div>
      <div>Dato</div>
      <div>Åpningstider</div>
    </div>
    <div class="oph-content">
      <div class="opening-hours">
      </div>
    </div>
  </div>
  <br><br>
  <p><strong>Autorisert Apple-reparasjon</strong></p>
  <p>Flere av Elkjøps butikker kan reparere dine Apple-produkter, enten mens du venter eller i løpet av meget kort tid. Les mer om <a href="/cms/autoriserede-reparatoer/autoriseret-apple-reparation/">autorisert Apple-reparasjon hos Elkjøp</a>.</p>
  <p></p>
  <strong>"Klikk &amp; Hent" informasjon: </strong>
  <p>Du finner vår Klikk&amp;hent-utlevering når du går inn hovedinngangen og tar til venstre mot kasse og vareutleveing. Du kan betale med kort i vareutleveringen. Ønsker du å betale med kontanter, henvend deg i kassen først.</p>
  <div id="google-maps-canvas" class="google-map" style="position: relative; overflow: hidden;">
htmljquerycss

Answer №1

  • .next refers to the subsequent element following the div
  • You are unable to insert a <p> within another <p>,

To add text to the last paragraph inside the chosen div, you can execute

$('.align-left p:last')
  .html(function() {
    return $(this).text() + '<span class="usynlig">Invisible text test</span>';
  })
.usynlig { display:none }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<dl class="store-details-info">
  <dt><strong>Address:</strong></dt>
  <dd>Solheimveien&nbsp;10,&nbsp;1473&nbsp;Lørenskog</dd>
  <dt><strong>Customer Service:</strong></dt>
  <dd>21 00 21 21</dd>
  <dt><strong>Email:</strong></dt>
  <dd><a href="https://www.elkjop.no/kontakt-oss" target="_self">Contact us</a></dd>
</dl>
<div class="align-left any-1-1">
  <strong>About the store </strong>
  <p>
  </p>
  <div class="oph-module">
    <div style="height: 25px;">
      <div class="element library-elkjop-gui"><i style="color: #141b4d;" class="icon-lightbulb"></i>Opening Hours</div>
    </div>
    <div class="oph-header">
      <div>Weekday</div>
      <div>Date</div>
      <div>Opening Hours</div>
    </div>
    <div class="oph-content">
      <div class="opening-hours">
      </div>
    </div>
  </div>
  <br><br>
  <p><strong>Authorized Apple Repair</strong></p>
  <p>Several of Elkjøp's stores can repair your Apple products either while you wait or in a very short time. Learn more about <a href="/cms/authorized-repairers/authorized-apple-repair/">authorized Apple repair at Elkjøp</a>.</p>
  <p></p>
  <strong>"Click & Collect" information: </strong>
  <p>You will find our Click & Collect pick-up point as you enter through the main entrance and turn left towards the checkout and item collection area. You can pay by card at the item collection area. If you wish to pay with cash, please go to the checkout first.</p>
  <div id="google-maps-canvas" class="google-map" style="position: relative; overflow: hidden;"></div>
</div>

Alternatively, you can utilize the canvas with the ID to navigate to its previous sibling

$("#google-maps-canvas").prev()
  .html(function() {
    return $(this).text() + '<span class="usynlig">Invisible text test</span>';
  })
.usynlig { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<dl class="store-details-info">
  <dt><strong>Address:</strong></dt>
  <dd>Solheimveien&nbsp;10,&nbsp;1473&nbsp;Lørenskog</dd>
  <dt><strong>Customer Service:</strong></dt>
  <dd>21 00 21 21</dd>
  <dt><strong>Email:</strong></dt>
  <dd><a href="https://www.elkjop.no/kontakt-oss" target="_self">Contact us</a></dd>
</dl>
<div class="align-left any-1-1">
  <strong>About the store </strong>
  <p>
  </p>
  <div class="oph-module">
    <div style="height: 25px;">
      <div class="element library-elkjop-gui"><i style="color: #141b4d;" class="icon-lightbulb"></i>Opening Hours</div>
    </div>
    <div class="oph-header">
      <div>Weekday</div>
      <div>Date</div>
      <div>Opening Hours</div>
    </div>
    <div class="oph-content">
      <div class="opening-hours">
      </div>
    </div>
  </div>
  <br><br>
  <p><strong>Authorized Apple Repair</strong></p>
  <p>Several of Elkjøp's stores can repair your Apple products either while you wait or in a very short time. Learn more about <a href="/cms/authorized-repairers/authorized-apple-repair/">authorized Apple repair at Elkjøp</a>.</p>
  <p></p>
  <strong>"Click & Collect" information: </strong>
  <p>You will find our Click & Collect pick-up point as you enter through the main entrance and turn left towards the checkout and item collection area. You can pay by card at the item collection area. If you wish to pay with cash, please go to the checkout first.</p>
  <div id="google-maps-canvas" class="google-map" style="position: relative; overflow: hidden;"></div>
</div>

Answer №2

I trust that the code below will be beneficial.

This particular snippet of code is: 

$('.align-left').next().append("<p>Invisible text test</p>");

You have the ability to modify it as follows: 

$('.align-left').append("<p>Invisible text test</p>");

An illustration can be found here: https://codepen.io/yasgo/pen/wvzwpRQ

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The CSS header remains the same size regardless of the size of the dynamic table

Is there a way to set the header in an XHTML page to be as wide as the page itself? I used width:100%, but the issue is that I have a dynamic table and when it grows bigger, the header doesn't expand. How can I solve this problem? #header{ top: 0 ...

cssxhtml

Refresh the content with an embedded iframe

I am attempting to update the body content by removing all existing content and inserting an iframe: function create_custom_iframe(target){ var iframe = document.createElement('iframe'); iframe.setAttribute('id', 'target_u ...

javascripthtmldomnode.jsiframe

Retrieving information from a server using AJAX and ASP.NET

Requesting assistance to identify my errors as a novice. I am completely lost at the moment. This is the code snippet in question: Service class with this get method: void OtvoriKonekciju() { uredjaj = new DBBL(); uredjaj.entity.Conn ...

jqueryasp.netajax

Blurry Background CSS Effect

Is there a way to create a background image with the same blurry effect as seen in the picture provided? It appears to involve multiple filters rather than just a basic blur. I attempted using the blur Effect, but it didn't achieve the desired result ...

cssimagebackgroundblureffect

How to Submit a Form in jQuery with both File and Text inputs without Redirecting the Current Window

I am working on creating an application form that allows users to attach images. The form consists of a few input elements placed within a div rather than a traditional form element. I need the form to be submitted via AJAX without causing a page redirect, ...

javascriptphpjqueryajax

Utilizing jQuery's Ajax functionality to extract filtered data from mySQL

I've been working on sending query strings fetched by clicking radio buttons to the server in order to receive a response in XML format. Although I'm close to finding a solution, I'm struggling to debug why it's not functioning as expec ...

javajavascriptjqueryajaxjsp

"Encountering issues with jQuery and Ajax - error message

I am having trouble with my ajax call in jQuery. You can view the jsfiddle here. The content of my page2.html file is just: <p>page 2</p> Can anyone spot the issue? The error message simply says 'error'. EDIT The jquery code is lo ...

jqueryajax

Keep an ear out for upcoming occasions once the transition has been completed

I am looking to create a smooth transition effect that will push the main content downwards when the Twitter Bootstrap collapse menu is activated using the toggle button. However, I have noticed an issue where if I quickly double click the toggle button, ...

jqueryhtmlcsstwitter-bootstraptransition

What is the correct way to implement checkbox validations using jQuery?

I have a total of 3 checkboxes that I would like to arrange in a particular order based on their checks. Currently, when one checkbox is selected for download, the logic I have implemented only considers the first checkbox and ignores the rest. I am look ...

jqueryhtmlajaxbootstrap-4

Using VML for background images in Outlook using HAML: A step-by-step guide

I am currently working on formatting an email digest using HAML and tables. My goal is to set a background-image to a table-cell in the email, but I've come to realize that Outlook requires VML in order to display a background-image correctly. After ...

cssemailoutlookhamlvml

How to retrieve video duration in Angular 2 before uploading the file

Is there a way to retrieve the video duration before uploading it in Angular2? I am looking for a solution without using jQuery. Here is the code snippet I have so far: <input type="file" class="form-control" ng2FileSelect [uploader]="uploader" accept= ...

htmlangularfile-upload

Send information using AJAX within a .NET integrated browser

In our current setup, we utilize a .NET embedded browser to showcase an HTML page that is generated by applying an XSLT file to an XML file using .NET. This process results in HTML content displayed within the embedded browser through the DocumentText prop ...

javascriptjqueryhtml.netajax

When a <select> tag is included within a <div> tag, it will not be submitted as part of a <form

I'm experiencing an issue with my HTML structure. Here is the code snippet: <form> <div> <select name="selectbox"> <option>option 1</option> </select> </div> </form> After su ...

htmlsubmit

In JavaScript, a dropdown menu becomes active when clicked on and becomes inactive when clicking outside of it

My script is not functioning properly when I click outside of the drop-down menu of the "Sign in" button. View jsfiddle Demo $(document).ready(function() { $(".openmenu").click(function() { var X = $(this).attr('id'); if (X == 1) { ...

javascriptjqueryhtmlcss

Resolving the problem of degrading image quality in HTML Canvas

Recently, I came across an issue while trying to display graphics on an HTML page using canvas. The problem I encountered was that the canvas element was somehow reducing the quality of my images during rendering, especially after some time. Let me visual ...

javascripthtmlcssdomcanvas

What is the best way to retrieve an array element from outside a function?

Is there a way to access the distance and pos elements outside of the function in this code snippet? navigator.geolocation.getCurrentPosition(function(position) { var pos = { lat: position.coords.latitude, lng: position.coords.longit ...

javascriptjqueryarraysfunctionfrontend

Adjust the top spacing in relation to the paragraph tag using jQuery

I wish to create multiple div elements with nested p tags that are initially hidden. Upon hovering over each div, I want the corresponding p tag to move up by the negative value of its own height. For instance: The first p tag has a height of 60px and a m ...

jqueryhtmlcss

Exploring all hidden input values by utilizing $.each

I'm trying to perform a specific action with each hidden input value, and in order to do so I wrote the following JavaScript code utilizing jQuery. $.each($("input[type='hidden']"), function (index, value) { alert(value.val()); }); Unf ...

jquery

Chrome freezes when an asynchronous ajax request is made using jQuery

Hey there, I'm working on an ajax request that is causing some issues in Chrome. Despite working fine in IE, Chrome freezes for seconds before the timeout event is triggered. Can anyone spot what might be causing this problem? Here is the code snippet ...

jqueryajaxgoogle-chromerequest

In my current project, I am working with Knockout and TypeScript but I am encountering difficulties in firing the window-resize event

Instead of using jquery, I prefer working with a custom handler for the $(window).resize(function () { ... event. If there is a way to achieve this without relying on jquery, please feel free to share it in the comments below. The code snippet below show ...

javascriptjquerytypescriptknockout.jswindow-resize