How can I include a script in a div using Javascript or Jquery?

I am facing a challenge where I need to incorporate a piece of javascript (Linkedin share button) into a specific div, but unfortunately, direct access to the DOM is not an option. However, using Javascript/jQuery to manipulate the DOM opens up possibilities. I am exploring the idea of appending the script to the desired div or even creating a new div within the container to target the script more efficiently.

The script in question: 

<script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: en_US</script>

Here is the existing HTML structure: 

<div class="left"></div>
javascriptjqueryhtmlcss

Answer №1

One way to achieve this is by utilizing javascript.

For instance, you can try the following code snippet:

var scriptTag= document.createElement( "script" );
scriptTag.type = "text/javascript";
scriptTag.src = "//platform.linkedin.com/in.js";
$(".left").append(script);

Give it a shot!

UPDATE: For a more refined approach, consider using .appendChild instead of .append

Answer №2

Here is a code snippet for creating a nested container within your "left" div, along with a script tag:

$(".left").html(
  $("<div>").html(
    $("<script>").attr({ 
      "type": "text/javascript", 
      "src": "//platform.linkedin.com/in.js"
    })
  )
);

Make sure to include the jQuery library in your project.

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

Activating a jQuery function as you move an item across the screen

Exploring the world of jQuery, I am eager to incorporate its drag and drop feature into my project. As I drag an item, I wish to invoke a function without interrupting the dragging process. The goal is to seamlessly continue holding the item while the func ...

jquerydrag-and-dropjquery-ui-sortablecontainment

Performance issues with the iOs CSS keyboard appearance are causing delays in

Recently updated my application to be mobile-friendly. I've noticed that at times, the keyboard seems to have a slight delay in appearing when I tap on an input field. I have around 20 inputs on a single page. I conducted a test with the same number ...

htmlioscssperformancekeyboard

what benefits does importing React from 'react' provide us with?

Currently, I am diving into the world of React JS. In case ii, while working with the App.js module, I noticed the need to import React. This is because the render() method is crucial for converting JSX into DOM elements. In contrast, when dealing with Per ...

javascriptreactjsreact-routerreact-redux

Is there a way for me to adjust the font size across the entire page?

Most CSS classes come with a fixed font-size value already set. For instance: font-size: 16px font-size: 14px etc. Is there a way to increase the font size of the entire page by 110%? For example, font-size: 16px -> 17.6 font-size: 14px -> 15.4 ...

javascriptcssvue.jssass

"Utilizing JSON data to implement custom time formatting on the y-axis with AmCharts

Looking to convert minutes to hh:mm:ss format in my JavaScript code var allDataTime = [{ date: new Date(2012, 0, 1), "col": "LONG CALL WAITING", "duration1": '720', "duration2": '57', "duration3": ...

javascriptjqueryangularjssvghtml5-canvas

Facebook Login issue occurs in IOS HTML5 app when attempting to log in from the 'Add to Home' screen

For a website with a mobile version, I have integrated code that allows users with Facebook to register without filling out a form. If the user meets any of the following conditions, everything works smoothly: Uses any desktop browser Uses any mobile bro ...

phpiosfacebookhtml

How can I ensure the correct order when parsing JSON and performing actions with it?

After fetching JSON data from YQL and converting it into a list, my goal is to highlight specific rows in the list based on their contents. Currently, I can achieve highlighting and toggling separately using .click, but I prefer to skip that step and have ...

jqueryjson

What steps can be taken to ensure an animation does not continually reset to its original state when run infinitely?

I am looking to create an animation that continues infinitely without returning to its original state after completion, similar to a sun moving animation. Below is a sample project: .animator3{ -webkit-animation-name:j3; -webkit-animation-delay:0s; -web ...

htmlcssanimation

Utilizing the after pseudo element for an active selector in CSS

I'm struggling to make an active icon selector work with the after pseudo element. Here is the code I have attempted: <html> <head> <style type="text/css"> .btn{ width:25%; } .name{ background: #fff; color: #000; text-alig ...

htmlcsscss-selectorspseudo-element

Ways to retrieve a specific value from a JSON dataset

I currently have an Ajax live search script with multiple text inputs for searching products. The live search functionality works perfectly, but I have a query: If I decide to change the name of a product, how can I go back to the previous page and re-s ...

javascriptjqueryajaxlaravel-5

Loop through XMLHttpRequest requests

I have been attempting to send multiple server requests within a for loop. After coming across this particular question, I tried out the recommended solution. Unfortunately, it doesn't seem to be functioning as expected. for (var i = 1; i <= 1 ...

javascriptajaxxmlhttprequest

Generate a sequence of years without relying on the range function

Is there a different approach to generating this array without relying on the range function? Below is an illustration of what I want, but without utilizing the range method. const years = myCustomArrayGeneration(1990, getYear(new Date()) + 1, 1); ...

javascriptarraysreactjs

Tips for transferring information from an express rendering to a Vue component?

When working with an express route, page.js router.post('/results', (req, res, next) => { output.terms = "hello" output.results = [{"text": "hello world"}, {"text": "hello sunshine"}] res.render("/myview",output) }) The cod ...

javascriptexpressvue.js

Running 'npm test' is successful, however the 'jest --coverage' command fails to execute

In my MonoRepo project (using Lerna), I have multiple packages, with one being a React application. For unit testing in the React project package, I rely on Jest. However, when I try to execute the jest --coverage command in the WebStorm console, it shows ...

javascriptreactjsnpmjestjslerna

Optimize the css file by updating it and minifying the content

Recently, I created a website for a client using PHP, HTML, Javascript, and CSS. Initially, I utilized SASS to streamline my styling process. However, the client now requests the ability to modify typography and main colors on their own. While I can easi ...

javascriptphphtmlcss

Updating the urlTemplate property of a MapView.UrlTile component in real-time

As a newcomer to React and React Native, I am currently exploring the usage of React Native Maps. My goal is to dynamically update the urlTemplate property of a MapView.UrlTile component every second for a certain number of times. My approach involves usi ...

javascriptreactjsreact-native

The Jquery animate function is not compatible with the transform property

I am facing an issue with the Jquery animate function. Despite trying various solutions, I have been unable to get it to work. Below is the HTML code that I have used: <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

javascripthtmljquerycssjquery-animate

Can you explain the functionality of sinon's stub.yields method?

The explanation given in the documentation for sinon regarding stub.yields is as follows: By using stub.yields([arg1, arg2, ...]), you are essentially performing a function similar to callsArg. This will result in the stub executing the first callback it ...

javascriptsinon

Using JavaScript for loops to return an empty array

When comparing the arrays in bakeryA and bakeryB with the ingredients of each recipe, the chooseRecipe function should print the name of the recipe if both bakeries have an ingredient for it. In this scenario, the output should be Persian Cheesecake. Howev ...

javascriptarraysfor-loopobjectnested-loops

How can I disable a select element in Laravel 5?

Hey everyone! Currently using Laravel 5 and trying to style the "select" class as "selectpicker". I'm facing an issue where I want to disable or hide the selected option when clicked, as I'm creating a div with the option's content right b ...

javascriptjquerycsslaravelbootstrap-4