堆栈内存溢出
  繁体   English   中英

如您所见，我正在尝试创建链接元素？

[英]As you can see I am trying to create a link elements?

 原文  2020-10-30 14:16:06  6   2    javascript/ html/ css/ web-applications

问题描述

<html>
  <head>
   <link 
 href="css/styles.css" 
 rel="stylesheet">
  </head>
   <body onload="createImg()">

    <h1>My Website</h1>

    <p>This is my first 
website</p>
    <div id='working_area' >
  
  
     </div>
 <script>
   function createImg(){

    var  img=document.getElementById("working_area");
img.innerHTML="<a src='https://www.google.com'>google</a>";
 }
 </script>
  </body>
 </html>

所以我想使用这种方法创建一个超链接而不是使用创建元素方法为什么？ 因为我想创建一个html编辑器

**有可能吗？ **

这是结果的图像。 该链接不起作用。 这是我得到的结果

2 个解决方案

解决方案1
 -1 已采纳  2020-10-30 14:17:24

使用href属性，而不是src的a标签。 

 <html> <head> <link href="css/styles.css" rel="stylesheet"> </head> <body onload="createImg()"> <h1>My Website</h1> <p>This is my first website</p> <div id='working_area' > </div> <script> function createImg(){ var img=document.getElementById("working_area"); img.innerHTML="<a href='https://www.google.com'>google</a>"; } </script> </body> </html>

解决方案2
 -1  2020-10-30 14:31:34

在 HTML 中， <a>标签定义了一个超链接， <href>属性表示链接目的地。 <src>不是它的一部分。

为什么我看不到渲染的<div>元素在这里？</div><div id="text_translate"><p> 我有一个部分 class 创建一个部分。 我正在使用 PizzaMenu class 从 UI 上的 data.json 文件中呈现每个披萨项目。 该代码对我来说似乎是正确的，应该呈现比萨饼，但事实并非如此。 以下是代码。<br> 我检查时得到&lt;div id = "app"&gt;undefined&lt;/div&gt; 。</p><p> 链接： <a href="https://codesandbox.io/embed/dazzling-robinson-bsn5g?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer">https://codesandbox.io/embed/dazzling-robinson-bsn5g?fontsize=14&amp;hidenavigation=1&amp;theme=dark</a></p><p> 应用程序.js</p><pre> class App { static pizzaMenu = new pizzaMenu(); static init() { const app = document.getElementById("app"); app.append(this.pizzaMenu.render()); } } App.init();</pre><p> PizzaMenu.js</p><pre> class pizzaMenu extends Section { constructor(title) { super(); this.title = title || "Loading..."; } render() { const pizzaMenuEl = this.createSection(); fetch("./data.json").then((response) =&gt; { console.log("Check 1"); return response.json(); }).then((data) =&gt; { data.pizza.forEach((item) =&gt; { console.log("Check 2"); pizzaMenuEl.innerHTML = ` &lt;div class="shop-item" id = ${item.id} &gt; &lt;span class="shop-item-title"&gt;${item.name}&lt;/span&gt; &lt;span class="shop-item-img"&gt;&lt;/span&gt; &lt;div class="shop-item-details"&gt; &lt;div class = "shop-item-sizes"&gt; &lt;input type="radio" value="100" name="sizes"&gt; &lt;label&gt;Small&lt;/label&gt; &lt;input type="radio" value="200" name="sizes"&gt; &lt;label&gt;Medium&lt;/label&gt; &lt;input type="radio" value="300" name="sizes"&gt; &lt;label&gt;Large&lt;/label&gt; &lt;/div&gt; &lt;span class="shop-item-price"&gt;Rs.${item.price}&lt;/span&gt; &lt;button class="btn btn-primary shop-item-button"&gt;ADD TO CART&lt;/button&gt; &lt;/div&gt; &lt;/div&gt;`; return pizzaMenuEl; }); }); } }</pre><p> 节.js</p><pre> class Section { // Classes must be passed as an array createSection(cssClasses) { const sectionEl = document.createElement("div"); sectionEl.classList.add("row"); if (cssClasses) { for (const cssClass of cssClasses) { sectionEl.classList.add(cssClass); } } return sectionEl; } }</pre><p> 索引.html</p><pre> &lt;body&gt; &lt;div id="app"&gt;&lt;/div&gt; &lt;script src="section.js"&gt;&lt;/script&gt; &lt;script src="pizzaMenu.js"&gt;&lt;/script&gt; &lt;script src="app.js"&gt;&lt;/script&gt; &lt;/body&gt;</pre><p> 数据.json</p><pre> { "pizza": [ { "id": 1, "name": "Tandoori Pizza", "image": "Images/pizza.png", "price": "Rs.200", "sizes": { "Small": 100, "Medium": 200, "Large": 300 } }, { "id": 2, "name": "Veggie Supreme", "image": "Images/pizza.png", "price": "Rs.250", "sizes": { "Small": 100, "Medium": 200, "Large": 300 } } }</pre></div>

[英]Why am I unable to see the rendered <div> elements here?

暂无
暂无

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

相关问题 我正在尝试记录提交按钮表单的元素，但在控制台浏览器中看不到任何内容 我正在尝试创建一个可以调整大小和移动的表 我正在尝试使链接弹出JavaScript 我正在尝试使用用户通过JavaScript警报框输入的信息在HTML页面上创建链接 你能指导我一个问题吗，我每次按下按钮时都会尝试更改颜色 为什么我看不到渲染的<div>元素在这里？</div><div id="text_translate"><p> 我有一个部分 class 创建一个部分。 我正在使用 PizzaMenu class 从 UI 上的 data.json 文件中呈现每个披萨项目。 该代码对我来说似乎是正确的，应该呈现比萨饼，但事实并非如此。 以下是代码。<br> 我检查时得到&lt;div id = "app"&gt;undefined&lt;/div&gt; 。</p><p> 链接： <a href="https://codesandbox.io/embed/dazzling-robinson-bsn5g?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer">https://codesandbox.io/embed/dazzling-robinson-bsn5g?fontsize=14&amp;hidenavigation=1&amp;theme=dark</a></p><p> 应用程序.js</p><pre> class App { static pizzaMenu = new pizzaMenu(); static init() { const app = document.getElementById("app"); app.append(this.pizzaMenu.render()); } } App.init();</pre><p> PizzaMenu.js</p><pre> class pizzaMenu extends Section { constructor(title) { super(); this.title = title || "Loading..."; } render() { const pizzaMenuEl = this.createSection(); fetch("./data.json").then((response) =&gt; { console.log("Check 1"); return response.json(); }).then((data) =&gt; { data.pizza.forEach((item) =&gt; { console.log("Check 2"); pizzaMenuEl.innerHTML = ` &lt;div class="shop-item" id = ${item.id} &gt; &lt;span class="shop-item-title"&gt;${item.name}&lt;/span&gt; &lt;span class="shop-item-img"&gt;&lt;/span&gt; &lt;div class="shop-item-details"&gt; &lt;div class = "shop-item-sizes"&gt; &lt;input type="radio" value="100" name="sizes"&gt; &lt;label&gt;Small&lt;/label&gt; &lt;input type="radio" value="200" name="sizes"&gt; &lt;label&gt;Medium&lt;/label&gt; &lt;input type="radio" value="300" name="sizes"&gt; &lt;label&gt;Large&lt;/label&gt; &lt;/div&gt; &lt;span class="shop-item-price"&gt;Rs.${item.price}&lt;/span&gt; &lt;button class="btn btn-primary shop-item-button"&gt;ADD TO CART&lt;/button&gt; &lt;/div&gt; &lt;/div&gt;`; return pizzaMenuEl; }); }); } }</pre><p> 节.js</p><pre> class Section { // Classes must be passed as an array createSection(cssClasses) { const sectionEl = document.createElement("div"); sectionEl.classList.add("row"); if (cssClasses) { for (const cssClass of cssClasses) { sectionEl.classList.add(cssClass); } } return sectionEl; } }</pre><p> 索引.html</p><pre> &lt;body&gt; &lt;div id="app"&gt;&lt;/div&gt; &lt;script src="section.js"&gt;&lt;/script&gt; &lt;script src="pizzaMenu.js"&gt;&lt;/script&gt; &lt;script src="app.js"&gt;&lt;/script&gt; &lt;/body&gt;</pre><p> 数据.json</p><pre> { "pizza": [ { "id": 1, "name": "Tandoori Pizza", "image": "Images/pizza.png", "price": "Rs.200", "sizes": { "Small": 100, "Medium": 200, "Large": 300 } }, { "id": 2, "name": "Veggie Supreme", "image": "Images/pizza.png", "price": "Rs.250", "sizes": { "Small": 100, "Medium": 200, "Large": 300 } } }</pre></div> 我正在尝试执行此Facebook API，但无法正常工作……您可以提出任何更正建议吗 试着看看我是否可以使星星动起来 我的代码中出现此错误-&gt;未捕获错误：不变失败：您不应该使用<Link>外面<Router> ，有人可以看到问题吗？ 我正在尝试创建带有框架的JSP页面
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM