CSS 添加 html 元素答案

【问题标题】：CSS add html elementCSS 添加 html 元素
【发布时间】：2021-11-18 17:16:02
【问题描述】：

我有一个小网站（Ubuntu、Apache2、PHP），这个网站上的每个页面都有类似的内容：顶部的网站名称、导航栏、一些联系信息，比如我的电子邮件，以及很快。有没有办法通过 CSS 添加这些元素？所以我只需要包含这个 CSS 文件并且我的页面上有标题吗？这是一个例子：

#navigation {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
  </head>
  <body>
    <div id=navigation>
            <nav>
                <a href="/somePage.html">Some page</a>
                <br>
                <a href="mailto:test@example.org">Contact admin</a>
            </nav>
            <h1>Title</h1>
        </div>
    
      Some long test to see, that the navigation bar is sticky
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
  </body>
</html>

如果我只包含 CSS 文件，我希望这个导航栏出现在每个新页面上。我尝试使用以下代码：

body:before {
 content: "<nav>[Content]</nav>";
}

但这似乎只能添加文本。也许你可以用 JavaScript 实现这个？但如果是的话怎么办？

【问题讨论】：

你是对的，content: 是纯文本。是的，您可以通过 javascript 实现这一点，但这种事情通常是通过某种模板来完成的。你如何做模板很大程度上取决于你使用的服务器技术——Apache？ IIS？运行 PHP 后端？ Java后端？ Nodejs后端？ CMS（内容管理系统）？ ...如果您描述了您的设置，将会有所帮助。
您也可以使用“客户端 HTML 包含”filamentgroup.com/lab/html-includes：启用 JS 时替换为它的 contentdocument 内容的 iframe。
@Stephen P：您需要更多设置信息吗？
我喜欢 connexo 的解决方案，并且我有一些将来会使用它的案例。 @myf 说的“客户端 HTML 包含”也可以，IF 您的网络服务器支持它，这就是我询问您的服务器设置的原因。我当前的项目在服务器上使用 Java，并且有一个 JSP 包含它可以使用； PHP（可能）有自己的设施（但我对 PHP 的了解还不够多）—— CSS 单独无法做到这一点，因为 'content:' 的限制跨度>

标签： javascript html css web-component

【解决方案1】：

你可以创建一个小的 webcomponent 来精确输出：

const template = document.createElement('template');
template.innerHTML = `<div>
    <nav>
        <a href="/somePage.html">Some page</a>
        <br>
        <a href="mailto:test@example.org">Contact admin</a>
    </nav>
    <h1>Title</h1>
</div>`;

class MyWebsiteHeader extends HTMLElement {
  constructor() {
    super();
    this.appendChild(template.content.cloneNode(true));
  }
}

customElements.define('my-website-header', MyWebsiteHeader);

#navigation {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

<my-website-header id="navigation"></my-website-header>

Some long test to see, that the navigation bar is sticky
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
gdfgdfgdfg
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br> Hi!

这是一个完全用您的 HTML 替换 Web 组件的版本：

const template = document.createElement('template');
template.innerHTML = `<div id="navigation">
    <nav>
        <a href="/somePage.html">Some page</a>
        <br>
        <a href="mailto:test@example.org">Contact admin</a>
    </nav>
    <h1>Title</h1>
</div>`;

class MyWebsiteHeader extends HTMLElement {
  constructor() {
    super();
    this.outerHTML = template.innerHTML;
  }
}

customElements.define('my-website-header', MyWebsiteHeader);

#navigation {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

<my-website-header></my-website-header>

Some long test to see, that the navigation bar is sticky
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
gdfgdfgdfg
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br> Hi!

【讨论】：

您缺少 CSS 部分 :)
@Roy：我已经添加了您的评论。
@Rotstein - 请注意，在真实页面（不是 sn-p）中，您需要将组件放在 .js 文件中，并且必须使用 <script...> 标记来引用它你所有的页面...<script src="yourtemplate.js"></script>
但它是 JS 而不是 CSS ;) 但是...... CSS 只是样式表，你不能将新元素添加到 DOM - 只有“伪元素”，如 :before、:after ... 在其他换句话说，你不能添加
标签，但你可以使用 :before 和 :after 来填充它......但不要学习那种类型的编码 XD