简体   繁体   English

如何使用 javascript 在页面开头或图像标签之前将标题元素添加到 html 文档中

[英]How to add a heading element into a html document at the start of the page or before the image tags using javascript

I am trying to add a heading tag using javascript in a html document along with trying to swap 2 images, I want this heading tag at the top of the page.(I am new to js so there might be some mistakes in the code) This is the html page code.我正在尝试在 html 文档中使用 javascript 添加一个标题标签,同时尝试交换 2 个图像,我希望这个标题标签位于页面顶部。(我是 js 新手,因此代码中可能存在一些错误)这是 html 页面代码。

<html>
<head>
    <link rel="stylesheet" href="style1.css">
</head>
<body>
    <img src="1123013.jpg" id="left" >
    <img src="1189318.png" id="right" >
    <form>
        <input type="email" id="email" value="manuojha1@gmail.com">
        <br>
        <input type="password" id="password" value="password">
        <br>
        <button id="reset">Reset</button>

    </form>
    <script src="script1.js"></script>

</body>

This is the javascript code I have written so far, I cannot find a way to insert the heading tag at the top of the page.这是我到目前为止编写的 javascript 代码,我找不到在页面顶部插入标题标签的方法。

let heading=document.createElement("h1");
heading.textContent="This is the sample heading";
body.append(heading);

heading.textContent="this is inserted heading";
body.append(heading);
let img1=document.getElementById("left");
let img2=document.getElementById("right");
console.log(img1,img2);
let swap=function(){
    let temp=img1.src;
    img1.src=img2.src;
    img2.src=temp;
};
img1.addEventListener("click",function(){
    console.log("image 1 clicked");
    swap();
});
img2.addEventListener("click",function(){
    console.log("image 2 clicked");
    swap();
});
console.log(img2.src);
let input=document.getElementsByTagName("input");
let reset=document.getElementById("reset");
reset.addEventListener("click",function(){
    input[0].defaultValue="default@123";
    input[1].defaultValue="def";
    console.log("reset button clicked");
});```

let html = Heading`; let html =标题`;

let update = document.querySelector('body');

if(update){

update.append(html);

}

` `

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 使用javascript,如何在HTML页面上的任何输入元素之前添加$ sign - Using javascript, how to add $ sign before any input element on an HTML page 如何使用javascript更改html元素的标题级别 - how to change the heading level of an html element using javascript 如何使用 JavaScript DOM 向网页上的 HTML 元素添加文本 - How to add text to HTML element on web page using JavaScript DOM 如何使用javascript在某个HTML元素之前添加HTML元素? - How to add a HTML element before a certain HTML element with javascript? 如何在文档的特定位置使用纯JavaScript添加HTML文档中的元素 - How to add an element in a HTML document using pure javascript at particular position of the document 如何使用javascript获取包括所有标签和元素值的html页面 - how to obtain html page including all tags and element values using javascript Javascript 如何使用 javascript 添加 html 元素 - Javascript How to add an html element using javascript 如何使用jQuery在某些字符串之前和之后添加HTML标签 - How to add html tags before and after certain string using jquery 使用JavaScript在页面中呈现HTML元素之前将其删除? - Remove Html Element before it is rendered in page using javaScript? 使用 javascript jquery 在元素之后或之前添加 html - Add html after or before an element using javascript jquery
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM