All geek questions in one place

Javascript HTML Output

I was wondering if anyone could help me with this simple code. I am trying to make a banner at the top of a web page for a cookie policy (click to agree, etc.). I have encoded part of PHP and it does and detects if the cookie policy is consistent, however I am having problems using the JS fragment to load the banner at the top of my page.

This is what I use to display this field, and the code example works fine by displaying a hyperlink or text (as shown below), but if I try to add any other type of HTML, such as a table like this, not works.

<table> <tr> <td>Test</td> <td>Table </td> </tr> </table>

Sorry updated hyperlink works

 <script type="text/javascript"> function changeText() { document.getElementById("new_coder").innerHTML = '<a href="#">sdsd</a>'; } </script> <b id='new_coder'>Good Bye World</b> <input type='button' value='Change Text'/>

This is what I'm trying to do.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <script type="text/javascript"> function changeText() { document.getElementById("new_coder").innerHTML = '<table> <tr> <td>Test</td> <td>Table </td> </tr> </table>'; } </script> <b id='new_coder'>Good Bye World</b> <input type='button' onclick='changeText()' value='Change Text'/> <body> </body> </html>

Is there a better feature for loading HTML snippets into a page using JavaScript. Sorry, I'm a bit sketchy in this area.

Thanks Debs

+4
source share
3 answers

In fact, you are faced with the quirk of javaScript.

JS has an automatic semicolon, and what it does is insert into the feed.

if you write your function as follows:

Jsfiddle

 function changeText() { document.getElementById("new_coder").innerHTML = "<table><tr><td>Test</td><td>Table </td></tr></table>"; }

It will work.

not notice line breaks in code

You can get a hint by pressing F12 and looking at the console.

 Uncaught SyntaxError: Unexpected token <

Next to where you had a line break.

+2
source

I would suggest using jQuery . With this you can write something like

 $(document).ready(function() { $('#changearea').html('<a href="#">Hyperlink</a>'); });

It is more accurate and should work in all browsers.

-2
source

dont use table-tag as it is deprecated in html5. if you like tables, use a div with css: table {display: table} (see w3schools or sth for more information)

next: don't add your content with js, but put it directly in your html code with css: {display: none}

if you trust all your users to use js, look for the element with getelementbyid, change its css display status to "block" or else else (maybe you like to use the position: fixed)

you can also use php to add (or not) 'style = display: none' directly to your html - later you can use the css pseudo-selector to remove the div when the user clicked> js at this point is not necessary (!).

I can also recommend using jquery, but maybe not necessarily in this content (avoid JS dependency as much as possible) ...

-3
source

Source: https://habr.com/ru/post/1482842/

More articles:


All Articles