如何在elm代码中添加更多的HTML元素？
在 Elm 代码中添加更多的 HTML 元素可以通过以下步骤实现：
- 导入 Html 模块：在 Elm 代码文件的开头，使用
import Html exposing (..)导入 Html 模块，以便使用其中的函数和类型。 - 创建 HTML 元素：使用 Html 模块中的函数来创建所需的 HTML 元素。例如，要创建一个
<div>元素，可以使用div函数，如div [] []。第一个空列表[]是用于添加属性的地方，第二个空列表[]是用于添加子元素的地方。 - 添加属性：如果需要为 HTML 元素添加属性，可以在第一个空列表中添加属性键值对。例如，要为
<div>元素添加一个class属性，可以将class键值对添加到属性列表中，如div [ ("class", "my-class") ] []。 - 添加子元素：如果需要在 HTML 元素内部添加其他 HTML 元素作为子元素，可以在第二个空列表中添加子元素。例如，要在
<div>元素内部添加一个<p>元素，可以将<p>元素作为子元素添加到列表中，如div [] [ p [] [ text "Hello, World!" ] ]。 - 渲染到页面：最后，将创建的 HTML 元素渲染到页面上。可以使用
Html.beginnerProgram或Html.program函数来启动 Elm 程序，并将 HTML 元素传递给view函数。例如，Html.beginnerProgram { model = initialModel, view = view, update = update }。
综上所述，要在 Elm 代码中添加更多的 HTML 元素，需要导入 Html 模块，使用 Html 模块中的函数创建 HTML 元素，添加属性和子元素，并将其渲染到页面上。
请注意，由于要求不能提及特定的云计算品牌商，因此无法提供与腾讯云相关的产品和链接。
相关·内容
1回答
小鼠在榆树中的运动速度
mouseevent、elm
我要在榆树上测出老鼠的速度。
现在我有了下面的代码，它获取鼠标在elm 0.18中的位置和单击状态
我们是否有可能调用更新中的函数来做到这一点，即使这样，我们是否可以维护一个全局变量来存储鼠标的最后位置？
有什么办法吗？
我对榆树完全陌生。
import Html exposing (Html, text, div)
import Mouse exposing (..)
main =
Html.program
{ init = init
, view = view
, update = update
, subscriptions = subscriptio
浏览 2提问于2017-04-21得票数 1
回答已采纳
1回答
如何在不出现“类型不匹配错误”的情况下将动态内容添加到Elm文件的HTML部分？
dynamic、types、elm
我在一个名为view的函数中有一个带有一些HTML内容的Elm文件。
HTML内容的一部分是通过从记录中提取数据的map函数动态生成的。
下面是该文件的代码。
module PhotoGroove exposing (main)
import Html exposing (div,h1,img,text)
import Html.Attributes exposing (..)
--model
initialModel : { photos : List { url : String }, selectedPhoto : String }
initialModel =
{ photo
浏览 5提问于2022-05-07得票数 1
1回答
如何在Elm lang中使用select (下拉)标记
drop-down-menu、html-select、dropdown、elm
我想用下面的代码在我的榆树应用程序中呈现简单的下拉列表，但它不能像预期的那样工作。我希望保持联合类型角色的位置，并尽可能避免使用字符串。
在Elm中使用dropdown的最好方法是什么？我还没有找到任何例子。
import Html exposing (..)
import Html.App exposing (beginnerProgram)
import Html.Events exposing (..)
import Html.Attributes exposing (..)
import Json.Decode
main =
beginnerProgram
{ model
浏览 1提问于2016-09-07得票数 6
回答已采纳
1回答
我正在使用以下模型制作一个简单的Elm应用程序：
type alias Model =
{ num : Float
, str : String
, list : List Float
, serverResponse : String
}
我遵循Todo的例子，我有一个类似的架构：
type Action
= NoOp
| ChangeNum String
| ChangeStr String
...
view : Model -> Html
view model =
...
update : Acti
浏览 3提问于2015-02-01得票数 2
回答已采纳
1回答
当使用innerHTML属性插入时，角材料标记不会呈现为HTML标记。
angular、typescript、angular-material2
我试图显示下面的代码，它是使用"innerHTML"属性在角4中插入的。
<div class="type-face">
<md-card class="mat-card">
<md-card-content class="mat-card-content">
<p><strong>Ab</strong> Maison Neue Demi</p>
</md-card-conten
浏览 2提问于2017-10-24得票数 0
1回答
在elm阵列中交换两个元素
arrays、swap、elm
我想做一个函数来交换数组中的两个元素。
显然，如果使用第一个元素触发Up msg，什么都不会发生。如果Down消息与最新元素相同的话。
我有以下代码：
module Main exposing (main)
import Browser
import Html exposing (Html, button, div, text)
import Html.Attributes exposing (class)
import Html.Events exposing (onClick)
import Array
import List exposing (map)
type alias Mod
浏览 2提问于2020-04-29得票数 1
回答已采纳
1回答
Elm自动完成用户输入
javascript、autocomplete、user-input、elm
我对埃尔姆很陌生。我在网页上有一个输入字段。当用户在输入字段中键入时，我想查询一个单词列表(存储在initialModel中)，并根据输入字段中键入的内容给出完成建议。我想我需要Html.Events的按键，所以我已经导入了它。我知道我还需要一个更新函数，所以我包含了和空函数。这是我到目前为止的代码。提前谢谢。
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import StartApp.Simple as StartApp
-- MODEL
浏览 3提问于2016-01-29得票数 2
回答已采纳
1回答
如何在使用“Elm体系结构”时存储子模块的状态
web、functional-programming、reactive-programming、elm
我是Function Programming(FP)和的新手，所以用FP方式思考对我来说是很有挑战性的。
我正在开发一个与非常相似的web应用程序。
为了简单起见，我们假设sub-module是一个计数器。它将显示初始值0和两个按钮，以增加/减少该值。
,---. ,---.
| + | 123 | - |
`---' `---'
我的应用程序的简化版本如下所示：
-------------------------------------
type alias Model =
{ contents : List Contents.Content
浏览 1提问于2016-05-10得票数 0
回答已采纳
1回答
基于http的Elm更新模型
http、functional-programming、elm
我试图更新我的比特币价格字段在我的List Token模型在我的更新功能。这是我的代码，我似乎不能让它只更新价格字段。我是否需要访问列表元素，因为我的模型就是list？这可以在elm中使用记录语法吗？
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Bass exposing (style, center, h1)
import Http
import Json.Decode as Decode
main =
Html.pro
浏览 1提问于2017-12-04得票数 0
回答已采纳
1回答
从HTML生成Sencha Touch 2列表
html、sencha-touch-2
我正在做一个项目，在这个项目中，我们创建了一个Sencha Touch 2版本的网站，我们得到的所有资源都是网站本身。
我的问题是，我有一个HTML格式的搜索结果列表，并希望动态地将这些结果添加到列表中(例如，将所有元素映射到列表中的一个元素)
你对如何处理这个有什么想法吗？
列表中一个元素的HTML如下所示：
<li>
<p><input type="checkbox" name="chk" value="FF032A" />
<a href="/files/docume
浏览 2提问于2012-12-05得票数 1
回答已采纳
1回答
无框架Elm中的模态
elm、elm-ui
我是新兴的榆树，我想创建一个模式，而不使用任何库，如引导或埃尔姆-UI。我在网上找到了这个简单的例子，它也使用JSON解码。是否有可能在没有任何框架/库和JSON解码的情况下简单地进行模态工作？我如何修改代码以获得一个简单的工作模式？
module Main exposing (main)
import Browser
import Html exposing (Html, Attribute, button, div, span, text)
import Html.Events exposing (onClick, on)
import Html.Attributes exposing
浏览 7提问于2020-10-04得票数 1
回答已采纳
3回答
尝试使用JavaScript对div高度进行动画处理
javascript、html、animation
我正在尝试设置div高度的动画，同时设置bottom属性。动画可以工作，但它不会停留在“父”目录的底部。
以下是动画的代码：
function mini(elem) {
var val = 200;
var elm = document.getElementById(elem.id);
function frame() {
val--;
elm.setAttribute("style", "height:" + val + "px;bottom:0px;&
浏览 0提问于2015-02-16得票数 0
1回答
elm中的子组件发送信号
javascript、timer、architecture、frp、elm
我在埃尔姆做个小申请。它在屏幕上显示一个定时器，当计时器达到零时，它会播放声音。我很难弄清楚如何发送信息(？)从计时器到音响播放器。
在架构上，我有三个模块:一个代表计时器的Clock模块，一个可以播放音频的PlayAudio模块，以及一个将Clock模块和PlayAudio模块结合在一起的Main模块。
理想情况下，当时钟达到零时，我想做一些事情，比如从Clock模块发送信号。当时钟达到零时，Clock 将向 Main**，发送一个信号，该信号将转发给** PlayAudio.
然而，从阅读Elm文档来看，似乎不鼓励使用Main以外的任何东西来处理信号。这就引出了我的第一个问题。什么是对这种
浏览 4提问于2015-04-17得票数 4
回答已采纳
1回答
在Elm中使用数字作为类型
types、elm
我正在学习榆树，我正在尝试使用类型来更好地描述我的领域。但是我被困在这里了:我不能使用数字文字作为类型/类型别名？有没有一种"elmish方式“来做到这一点？ module Main exposing (main)
import Browser
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)
type alias Model =
{ pos : Int }
type Up = 1
type Down = -1
type Direction = Up
浏览 8提问于2020-01-08得票数 2
回答已采纳
1回答
我正在尝试使用Html.App.beginnerProgram，并且我想添加事件处理程序(onKeyDown等)。添加到<body>元素。
不幸的是，我放在view中的所有东西都变成了<body>的子类。从view返回Html.body并不能解决这个问题。这段代码：
main = beginnerProgram { model = 0, view = view, update = update }
view model = body [] []
update _ model = model
将生成：
<html>
<head>...&
浏览 7提问于2016-09-23得票数 6
回答已采纳
3回答
不使用: querySelectorAll根元素的
javascript、children、selectors-api
让我们假设我们有这个HTML结构：
<div id='test-div'>
<div class='random-class-1'>
<div class='useless-element-1'>
</div>
<div class='useless-element-2'>
</div>
<p>Just a paragraph, and useless</
浏览 0提问于2017-02-08得票数 6
回答已采纳
3回答
XPath:元素在DOM中有点缺失，但仍然存在，或者类似的东西。
javascript、selenium、selenium-webdriver、xpath、webdriverwait
我尝试使用XPath检查(单击)此复选框，但到目前为止，我的所有尝试都失败了，因为它们单击了图例中的链接(Lorem )
HTML源：
<div class="input-outer checkbox">
<div class="section-head sec-head2">
<!---->
<div class="pull-left">Tick this box</div>
<!----><!--
浏览 3提问于2020-12-13得票数 0
1回答
检查元素是否可见
javascript、angularjs、selenium、selenium-webdriver、protractor
我有一个应用程序列表，是在一个非角度页面上列出的。可用的应用程序列表取决于订阅级别。如果订阅级别没有购买应用程序，则仍然列出应用程序，但是应用程序上有一个覆盖层。(请看图)。
html如下所示：
<div class="apps-item apps-no-border disabled">
<div class="apps-name">
<span>Interactive Event Diagrams</span>
</div>
<div class="d
浏览 2提问于2015-09-23得票数 2
回答已采纳
3回答
Javascript向新ID添加ID和散列链接
javascript、jquery、html、dynamic
几个月前，我“学会了”JavaScript，但很快就学会了Python，并花了过去几个月的时间用这种语言编写程序，所以我决定回去学习JavaScript是个好主意。现在，我正在用JS制作一个非常简单的“博客”，它获取文章的标题，从文章中生成一个散列链接，并创建一个最近发布的部分，在这里您可以单击链接跳转到页面中的帖子。
例如，假设其中一个帖子的格式如下：
<h2 class="post">Another post for you</h2>
<h4>I know you love these</h4>
有多个帖子，底部有一个空容器，
浏览 1提问于2013-12-13得票数 1
回答已采纳
3回答
如何在jquery中只显示一个指定的div
php、jquery、element、display
当我使用类.showFormButton单击按钮时，我试图显示一个指定的div，但不幸的是，出现了每个带有类.showForm的div。如何使用.showForm只显示一个jQuery div？JQUERY：
$(document).ready(function() {
$(".showFormButton").click(function(e){
e.preventDefault();
$(".showForm").css('display', 'block');
$(".showForm").css('
浏览 2提问于2016-07-13得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
