Tips for modifying HTML elements using Javascript after a link is clicked

Question

Tips for modifying HTML elements using Javascript after a link is clicked

Imagine a scenario where there is a DIV called "videoplayer" containing an image within it.

Is there a straightforward method to modify the HTML content inside this DIV when a link is clicked?

For instance, the current content of the DIV is as follows:

    <div class = "big_player" id="player1">
             <img src="whatever.jpg">
    </div>

Upon clicking a link, I desire the HTML to transform into:

    <div class = "big_player" id="player1">
             <script>
                playVideo(file, stream, key);
             </script>
    </div>

Which approach is the most straightforward and effortless to achieve this task?

javascript jquery html css ajax

Answer 1

Answer №1

If you're looking to execute a script directly, you can bypass the .html() method and run it without any intermediary steps.

For example:

$('linkID').on('click', function(e){
   e.preventDefault();

   $('#player1').html('new html here');

});

Alternatively, if you prefer running scripts directly (as long as it meets your requirements):

$('linkID').on('click', function(e){
   e.preventDefault();

   playVideo(file, stream, key);

});

Answer 2

If you're looking to execute a script directly, you can bypass the .html() method and run it without any intermediary steps.

For example:

$('linkID').on('click', function(e){
   e.preventDefault();

   $('#player1').html('new html here');

});

Alternatively, if you prefer running scripts directly (as long as it meets your requirements):

$('linkID').on('click', function(e){
   e.preventDefault();

   playVideo(file, stream, key);

});

Answer 3

Answer №2

Implementing functionality with JavaScript:

<a id="link" onclick='change()' href="#">Link</a>

<script>
function change()
{
  var script = document.createElement('script');            
  script.innerHTML = 'playVideo(file, stream, key);';
  p = document.getElementById("player1");
  p.innerHTML = "";
  p.appendChild(script);
}
</script>

Alternatively, as mentioned by Gaby, it can be executed directly:

<script>
  function change()
  {
    playVideo(file, stream, key); 
  }
</script>

Answer 4

Implementing functionality with JavaScript:

<a id="link" onclick='change()' href="#">Link</a>

<script>
function change()
{
  var script = document.createElement('script');            
  script.innerHTML = 'playVideo(file, stream, key);';
  p = document.getElementById("player1");
  p.innerHTML = "";
  p.appendChild(script);
}
</script>

Alternatively, as mentioned by Gaby, it can be executed directly:

<script>
  function change()
  {
    playVideo(file, stream, key); 
  }
</script>

Answer 5

Answer №3

UPDATE

Give this a shot:

$("img").on("click", function(e){

var content = "<div>" +
                   "insertContent(file, stream, key);" +
              "</div>";

$(this).parent().html(content);

});

Ensure that the insertContent() function and its parameters are in place. Let me know if it doesn't work. We might need to consider using eval() if it fails.

Answer 6

UPDATE

Give this a shot:

$("img").on("click", function(e){

var content = "<div>" +
                   "insertContent(file, stream, key);" +
              "</div>";

$(this).parent().html(content);

});

Ensure that the insertContent() function and its parameters are in place. Let me know if it doesn't work. We might need to consider using eval() if it fails.

Tips for modifying HTML elements using Javascript after a link is clicked

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to increase the top padding of an anchor link?

Styling a textbox within a gridview using JavaScript

Issues observed when integrating Axios custom instance with Next.js

Generating unique names based on input from users

Activating the CSS :active selector for elements other than anchor tags

"Shopping just got easier with our new drag and drop feature! Simply drag items

Link your 3D force graph node by attaching it

Using values from a select menu in a math calculation without including a decimal point

Using jQuery Ajax to Retrieve Data from a Textbox Array

jQuery's text() function may return null when used in Google Chrome

Is there a way to use the onclick event to open a link in the same window and tab?

Issue with the functionality of Material-ui tooltip

Blend multiple images using Angular

"Encountering an error retrieving weather forecast API in JavaScript - issue with

Use AppScript to exclude the first row (which contains the column names) when filtering a table

How can you effectively retrieve values in Chakra Core without encountering any memory complications?

The GAS web application is experiencing issues with sorting dates correctly on the Javascript table

What is the process for accessing extra scope information with next-auth?

What is the method to fetch a JSON URL data set (using Ajax and jQuery) in order to generate a dynamic chart display that updates automatically on a Wordpress webpage?

Having trouble getting the Vue checkbox change event to work?